Flutter UI Widgets

I don’t know about you but opening up the debugConsole to view the submitted form values seems kinda boring. Let’s display the result in an AlertDialog. Paste in the following code below the build method:

...
Future<void> _showResultDialog(BuildContext context) {
  return showDialog<void>(
    context: context,
    builder: (context) {
      return AlertDialog(
        content: FormResult(data: formData),
        actions: <Widget>[
          TextButton(
            child: const Text('Done'),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      );
    },
  );
}
...
// Call it after the setState in the onPressed method
_showResultDialog(context)

Save your work. This method, returns the showDialog method which returns an AlertDialog in its builder. It takes in the context so it knows where to mount the dialog in the widget tree. The content of the AlertDialog is the FormResult widget which has been added to the starter project of this episode. It simply displays the formData in a ListView.builder.

Next, we pass in a TextButton as an action, pressing this button pops the AlertDialog route from the stack. The pop method simply navigates to the previous page which is the CreateArticle page. Finally, we call this method inside the onPressed method on the submit button. Let’s fill out our form once more and submit it.

Everything seems to work just fine, right? But not really. If you scroll down the dialog, you’ll notice that the isBreaking field is false while category field is null. These fields were set their default values and not the one we entered in the form. The reason for this is that the showDialog method returns a Future and you can see this in the wrapper method.

This means that the call to the _showResultDialog is an asynchrounous code which means it doen not complete immediately. It returns a value in the future. Let me move that up although you’ll still get the same behaviour. So that line simply executes and moves to the next line which is a call to setState. Then whenever that Future method completes execution, it notifies the program and returns the value if any. Asynchrounous programming is beyond the scope of this course.

But in a nutshell, what happens here is that the call to setState is executed immediately because it not a asynchrounous action. So it sets the value of isBreaking to false and category to null. Then when the dialog displays, it shows those values. The beauty of the showDialog method is that we can do something when the future is resolved. Meaning when we’re done with the dialog or in simpler terms, when the dialog is popped off the stack.

Update your code to the following:

// Chained in the showDialog.
).then((_) {
  setState(() {
    formData.isBreaking = false;
    formData.category = null;
  });
});

We simply moved the call to setState to the then method. The then method is executed when the future has been completed. So this code block would be called when the dialog has be popped from the stack. With this, the values of those form fields are only reset when we’re done viewing the result. Save your work and fill the form once more, everything works and you have a nice dialog that displays the result of the submitted form.