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.

Basic Usage

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:

Conclusion:

There is a lot more than this package to explore. Go to pub.dev and explore more.

--

--

--

💡 Learn Flutter in a Simplified way 📱 Develop Android & IOS Apps 🔥 Unleash the power of Flutter

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

DAO Saturn Black. Broadcast with the project team

LeetCode 1044: Longest Increasing Substring

App Development Best Practices-2 (Version control extended)

MVC Architecture & Its Benefits in Web Application Development

Ledge Grab System: Part 1

Pocket Dictionary of Data Engineering

Learn how to create job schedulers in Spring Boot application

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Flutter Simplified

Flutter Simplified

💡 Learn Flutter in a Simplified way 📱 Develop Android & IOS Apps 🔥 Unleash the power of Flutter

More from Medium

Let’s discuss BLOC state management for Flutter

Flutter- Lets Know it!

Divider in Flutter

Flutter animation for beginners