Best way to create a global loading screen with bloc?

Question

I tried to create a loading screen widget on top of the widget tree stacked with its first scaffold. It works fine inside that scaffold. When I navigator.push to another scaffold and try to trigger the loading screen, it doesn't appear on the second scaffold. It only works on top of the first scaffold.

I saw an approach with a single scaffold app. But it is not suitable in my context. Is there any way to create a stack that affects all scaffolds underneath it or WHAT IS THE BEST WAY TO USE A GLOBAL LOADING SCREEN, DIALOG BOX WITH BLOC

Solution

The best way to create a global loading screen or dialog box is to use the get package route management functions, all you need to do is to wrap your widget tree with

GetMaterialApp instead of MaterialApp

and then you can call

Get.generalDialog(...) or Get.dialog(...)

anywhere in the app. And if you decide to use another means like flutter's inbuilt showDialog(...) and need access to the base MaterialApp's context, you can call Get.context

Comments

[Michael Lee]

"Always-on-top" modals are implemented with Navigators in Flutter. Things like Dialogs are just Navigators, and they do a great job of blocking the screen no matter what.

[Michael Lee]

Another approach is to wrap your MaterialApp in a Stack. This is a bit hard to get right depending on what widget you render on top of the app, because MaterialApp gives ThemeData to widgets. You'll have to do some manual styling.