Flutter　await の処理中にCircularProgressIndicatorを出したい

実現したいこと

趣味のFlutterアプリ開発です。

・最初の画面で条件を設定
・ボタンを押すと設定をもとにランダムで条件に合う組み合わせ（リスト）を生成
→・条件に合う組み合わせが作れない（存在しない）場合は、アラートダイアログを表示
・条件に合う組み合わせができたら、次画面で生成結果を表示
・ランダム生成の関数が動いている間、CircularProgressIndicatorを表示

ということがしたいです。

発生している問題・エラーメッセージ

generateSupply();がリストを作るFuture関数で、
20000回試行してできなければ、条件に合うものがないと判断するようになっています。
この間、CircularProgressIndicatorを出したいということです。

setState(() { showProgress=true;});でプログレスサークルを表示させ、
その状態でawait関数が動き、そのあと
setState(() { showProgress=false;});で消す、
というつもりで書いているのですが、
実際に動かすと、プログレスサークルが出ません。

なぜawait関数の前にsetState→再描画が動かないのでしょうか？
問題点があればご教示お願い致します。

補足：await generateSupply();の中身は、200ほどのマスタデータからランダムで10点抽出し、
それが条件を満たしているかどうか調べる、という行為を最大20000回までループするものです。

試したこと

・setState(() { showProgress=false;});をなくすと、
AlertDialogが出て、閉じた後にプログレスサークルが表示されました。

・元の関数await generateSupply();の代わりにawait Future.delayed(Duration(seconds: 3));を入れると、
3秒間、狙い通りにプログレスサークルが表示されました。

・元の関数await generateSupply();の前にawait Future.delayed(Duration(seconds: 3));を入れると、
３秒間サークルが出た後、generateSupply();が動いている間サークルが止まる挙動になりました。

該当のソースコード

Dart
1  @override
2  Widget build(BuildContext context) {
3    return Scaffold(
4      body: showProgress?
5      Container(
6          alignment: Alignment.center,
7          child: const CircularProgressIndicator()
8      ) :
9      Center(・・・略・・・),　条件設定画面のwidgetが入ってます。
10      floatingActionButton: FloatingActionButton(
11        onPressed: ()async{
12          setState(() {showProgress=true;});
13          await generateSupply();  //この中で20000回試行し、できなければtimeOver=true;
14          setState(() {showProgress=false;});
15          if (timeOver){
16            showDialog(
17              context: context,
18              builder: (_) {
19                return AlertDialog(
20                  title: Text("生成失敗"),
21                  content: Text("組み合わせがありませんでした"),
22                  actions: <Widget>[
23                    ElevatedButton(
24                      child: Text("OK"),
25                      onPressed: () => Navigator.pop(context),
26                    ),
27                  ],
28                );
29              },
30            );
31          }
32          else {
33            Navigator.push(context,
34              MaterialPageRoute(builder: (context) => supPage(supplyList)),);　//できたリストを引数に渡して次画面へ
35          }
36        },
37        child: const Icon(Icons.restart_alt_rounded)
38      ),
39    );
40  }

行動規範の内容に同意します

回答2件

ベストアンサー

generateSupply内にawaitが含まれていないからかな。

・元の関数await generateSupply();の前にawait Future.delayed(Duration(seconds: 3));を入れると、
３秒間サークルが出た後、generateSupply();が動いている間サークルが止まる挙動になりました。

という現象からの想像です。

awitがないとUI側のawaitに処理がスイッチしないので、画面の更新がされないです。
こういう処理はIsolatesを使うことを考えましょう、というのが作法になります。

想定通り動かない場合のgenerateSupplyの例。
関数中にawaitがないので、この処理が終わるまで他の待機中の非同期処理が動かない。

dart
1  Future<void> generateSupply() async {
2    for (int i = 0; i < 100000; i++) {
3      debugPrint("$i");
4    }
5  }

Isolateが面倒なら、for文の中にawaitなdelayを入れるとか。

dart
1  Future<void> generateSupply() async {
2    for (int i = 0; i < 100000; i++) {
3      await Future.delayed(const Duration(milliseconds: 1));
4      debugPrint("$i");
5    }
6  }