Flutter UI Widgets

Nov 9 2021 · Dart 2.14, Flutter 2.5, VS Code 1.61

Part 1: Flutter UI Widgets

11. Display Dialogs

Episode complete

Play next episode

About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 10. Work with Forms Next episode: 12. Make Your App Design Responsive

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

I don't know about you, but opening up the debug console to view the submitted forms instance, it's kind of boring. Let's display the results in an allot dialogue piece in the full link below the view and method. This method returns the show dialog method. Richard Thompson alerts dialogue in its Buda. It takes in the context. So it knows where to Mando dialogue in the widget tree. The content of the allot dialogue is the farm results widget, which has been added to the startup project of this episode. It simply displays the fund data in a list view. Next, we pass it a text button as an action present is button pops, the dialogue route from the stack, the partner thoughts simply navigate to the previous page, which is a create at school page. Finally, we then call the show results dialogue method inside the on Pressed method of the submit button. Save your work. let's fill out the form ones more and submit it. Everything seems to work just fine, right? But not really. If you scroll down the dialog, you'd notice that it is breaking field is false while the category field is null, these fields are set to the default values and not the one we entered in the form. The reason for this is that the show dialog method returns a future. And you can see this in the rapper method. And this means that the call to show result dialogue is an nsynchronized code, which means it does not complete immediately. Instead it returns some value in the future. And let me move that up, although you to get the same behavior. So that line simply executes and move to the next line, which is a call to set states. Then whenever that future method completes execution, it notifies the program, our returns, the value, if any, I said various programming is beyond the scope of this course, but in a nutshell, what happens here is that the culture sets date is executed immediately because it is not an unsynchronous action. So it sets the value of his break into false and categories to null. And now then when did that look, this please. It shows those values immediately. The beauty of the show dialog method is that, we can do something when the future is resolved. Meaning what we're done with the dialogue or in simpler terms. When the dialogue is pop off the stack, we can actually do something. Now, update your code to the following. We simply move the call to set state 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 been popped off the stack with this, the value of those phone fields are only reset when we are done in the results, save your work and feild the form Ones more. Everything walks, and you have a nice dialogue that displayed the result of the submitted form.