如何在 AlertDialog 关闭时刷新 Flutter UI？

Question

I'm working on some sort of time tracking application. The main idea behind it is simple - add the number of hours for a wanted project and display the sum of hours per day.

I'm using Flutter and dart for this and I have the following: - List of cards for every weekday - Cards have Gesture detector tap implemented - this action will show all projects for the selected day - AlertDialog pop-up to add the hours

I'm trying to refresh the total number of hours for the selected day on Alert Dialog pop-up close without reloading all the data.

Can someone help me with any idea how to implement the refresh?

What I've tried so far is the following:

1. I update the data context (the passed values) before I navigate to the previous screen
2. I use StatefulWidget in order to add interactivity to my app
3. I use setState to change the data before I return to the previous screen but without any success.
4. I found multiple ways on google how to "refresh" UI but without any success
5. I try to use setState() since it's perfectly working with some data and I got the following error: " A build function returned null."
6. I add setState as part of ShowDialog and I got the following error: "setState() or markNeedsBuild() called during the build." so I add additional logic to check if the data is dirty or not but at the end of a day I got the same result.

Desired behavior for this will be to click on the card and display all the projects for the selected day. After adding a new value I want to return to the same place (with opened card) and the newly added project will show up on the list along with updated total hours for the day.

For now, I got edit partially done. I open the card and edit one of the existing project. The data is saved, but when I return to the previous screen I cannot update the hours on the UI. When I open the edit screen once more the shown data is as expected.

Answer 1

First you need to call your showDialog within a Stateful Widget in order to have access, has the name suggests, to a state. Then, within that screen, you can call a method and display your dialog and it will return a Future<void> which means you can perform so action after the dialog is dismissed, such as

showDialog(// Yours params).then((_)=>setState((){}));

and your UI will be updated to match changes.

Answer 2

Return true in pop Navigator from the dialog when want to refresh the screen

FlatButton(
    onPressed: () {
        Navigator.of(context).pop(true);
      },
    child: Text("Close"))

Refresh screen when getting true in result

   final result = await showDialog<bool>(
      context: context,
      builder: (context) => MyDialog(),
    )
   if(result){// refresh screen}