Ever wonder how you can track the state of your dialogs whenever a user closes or opens up a dialog either by tapping on the dialog content actions or by dismissing from the barrier? Here are some Tips and Tricks we can learn from:
There’s a helper widget that shows any kind of dialogs(Alert Dialog, Simple Dialog etc) in flutter on any platform(iOS, Android, Web or Desktop) whether custom or built-in dialogs. 🤔…you got it right! the showDialog function!!!.
showDialog Displays a Material dialog above the current contents of the app, with Material entrance and exit animations, modal barrier colour, and modal barrier behaviour (dialog is dismissible with a tap on the barrier).
The showDialog function is also an Asynchronous function that returns a Future<T> and with this we can track the state of our dialogs by awaiting on showDialog function as a future.
At the end of this read we’ll able understand and do this!
First, your flutter app must have a main.dart file. Where everything starts to run. Having this, I’ve 3 important snippets to talk about:
- The MyAlertDialog Widget: This is a widget that extends the StatelessWidget with some few parameters (final String title, final String content, final String buttonText1, final String? buttonText2, final void Function(bool v) callback) that returns an AlertDialog widget, where the void callback function has a callback Type of boolean and from this we can get the callback for each button tapped in the AlertDialog.
See snippet below:
2. The showAlertDialogs Asynchronous function: To show MyAlertDialog this function needs to be called. And it takes some required parameters BuildContext that locates where to display this in the widget tree. Looking at how this is done. we have a local nullable variable bool? response that we initially set to null. This bool variable is responsible to keep track of the callback we get from the MyAlertDialog widget. If the callback from the MyAlertDialog returns a true/false value we set it to our response bool var and return it.
Now we get: if a user taps on the YES button it returns a true value and on a NO button it returns a false value. Else if the barrier or System back button is tapped we get the null value. Now we can use this values in the UI to react to it as a state.
Snippet below:
2. The HomePage: The Homepage widget is a StatefulWidget that returns a Scaffold and a Column widget which takes List<Widget> of Text(message) and TextButton(‘“Show Dialog”,onPressed: … ). where the message is a String that gets updated( “[Yes] was tapped!!!”, “[NO] was tapped!!!” , “[Nothing] was Tapped!!!” ) whenever a state is been emitted from the showDialog action.
When the onTapShowDialog method is called or tapped from the TextButton onPressed:… callback, we also call the showAlertDialogs and use the .then method to listen to the return value of the showAlertDialogs method. From this we can get the value(true/false or null) and use the if else statement to update the empty String message variable.
See snippet below:
Full Code in snippet:
You can clone this code from GitHub here don’t forget to star🌟 the repo☺️
Happy Coding New Year!!!
