Prevent users from doing things when some async actions going on — Overlay loader in the flutter
Here is the scenario, when you want your users to wait until you get some data from the server. But the monkey mind of humans won’t wait till then. They may perform some actions like clicking on some buttons or clearing the existing text values.
So we need something that indicates loading as well as prevents users from performing any other actions. This is not a new thing. We can simply place an overlay element on the screen and place a simple loading indicator.
Actually, this is pretty simple but for the sake of making this article interesting, I’m adding all this stuff.
Let’s dot it…
- Add dependency to your pubspec.yaml file.
- Now run flutter pub get to install the dependency.
The most simple usage is just to wrap the widget that you want an overlay on LoaderOverlay. The default loader will be shown.
- This simple step will already configure the loader overlay for use.
- After that configuration you can just call the method:
- You can stop hide the loader by calling:
- You can check if the overlay is visible:
- And the final result will be:
There is a lot more than this package to explore. Go to pub.dev and explore more.