Update value in dialog-CodePudding

I want to show the progress value in Dialog while data are fetching from the server. When one item is fetched, it should show 5%, and if second item is fetched, it shows 10% until 100% （total of 20 items）

showSyncDialog(
      BuildContext context,
      Repository repo,
      BehaviorSubject<double> percentage) {
    double percent = 0.0;
    int count = 0;

    return showDialog(
        barrierDismissible: false,
        context: context,
        builder: (_) {
          return StatefulBuilder(builder: (context, StateSetter setState) {
            return Dialog(
              elevation: 0.0,
              child: FutureBuilder(
                  future: repo.getAdminList(urls),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return FutureBuilder<List<ABC>>(
                          future: repo.getList(),
                          builder: (context, snapshotDatas) {
                            if (snapshotDatas.hasData) {
                              for (var i in snapshotDatas.data!) {
                                repo.getItems(i.id!)
                                    .then((value) {
                                  percent = ((count  ) / 20 * 100);
                                  print(percent.toString()   "efewfeeff");
                                  percentage.sink.add(percent);
                                  print(percentage.stream.value.toDouble());
                                });
                              }

                              return Padding(
                                padding: EdgeInsets.all(15.0),
                                child: LinearPercentIndicator(
                                  animation: true,
                                  lineHeight: 20.0,
                                  animationDuration: 2000,
                                  percent: percentage.stream.value.toDouble(),
                                  center:
                                      Text(percentage.stream.value.toString()),
                                  linearStrokeCap: LinearStrokeCap.roundAll,
                                  progressColor: Colors.greenAccent,
                                ),
                              );
                            } else {
                              return Text("No item");
                            }
                          });
                    } else {
                      return Text("No item");
                    }
                  }),
            );
          });  
        });
  }

Output

I/flutter (16036): 0.0efewfeeff
I/flutter (16036): 0.0
I/flutter (16036): 5.0efewfeeff
I/flutter (16036): 5.0
I/flutter (16036): 10.0efewfeeff
I/flutter (16036): 10.0
I/flutter (16036): 15.0efewfeeff
I/flutter (16036): 15.0
I/flutter (16036): 20.0efewfeeff
I/flutter (16036): 20.0
...

My problem is the percentage value in the dialog always displayed 0.0 although the value is changing as displayed in the console. How to update the value in dialog?

CodePudding user response：

Use StatefulBuilder to use setState inside Dialog and update Widgets only inside of it. Here is an example.

showDialog(
  context: context,
  builder: (context) {
    String contentText = "Content of Dialog";
    return StatefulBuilder(
      builder: (context, setState) {
        return AlertDialog(
          title: Text("Title of Dialog"),
          content: Text(contentText),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Cancel"),
            ),
            TextButton(
              onPressed: () {
                setState(() {
                  contentText = "Changed Content of Dialog";
                });
              },
              child: Text("Change"),
            ),
          ],
        );
      },
    );
  },
);