Adding Modal Dialogs into the projects

📚 Official Books Flutter Apprentice
1

First and foremost, thanks for writing such a good book and sharing with us. It really helps for getting out the tutorial valley.

My question is, how can I add modal dialogs to one of the example projects (let’s say navigation chapter)? For example, I’d like to have a CircularProgressIndicator inside an AlertDialog, which have its barrierDismissible property set as false. This way I can show the user that the app is on something (trying to login) and prevent accidental taps on the underlying page.

This modal dialog has to stay over the login page as the timer counts down, and it should be gone right after _loggedIn is set in AppStateManager.

I’ve applied many methods and was able to show the modal dialog properly but always faced two problems:

  1. Navigator.pop(context) either popped wrong page or not popped the dialog at all.
  2. Couldn’t write a proper ‘handlePop’ code to prevent user tap on device’s back button (Android) while the modal dialog was active.

Thanks in advance.

Regards,

1 Like
2

I had to pass this hill, therefore ditched the Modal Dialog idea and wrapped the main Scaffold widget of the page with a Stack Widget. I’m enabling a container which is on top of the scaffold and prevents user access to it. The control of this container visibility is in hands of the AppStateManager via Provider. The container contains a CircularPeogressIndicator.

Applied half transparency via Opacity Widget.

If you have a better solution or an idea regarding to Modal Dialogs, I’m all ears.

Cheers,

3

In chapter 11 https://www.raywenderlich.com/books/flutter-apprentice/v2.0/chapters/11-networking-in-flutter we start showing how to display a loading state while fetching data from an API.
Worth a look probably.

1 Like
4

Thanks for the info. I was just about to start this chapter today. Will compare with the current solution.