Maybe the easiest way to handle user input during async operations is to simply block the entire UI. Sure, there are friendlier ways but if we don’t block the UI we may need to handle cancels and late-response errors in a much more complicated manner. Simply showing a modal progress like below is an efficient and not too horrible method.
I tried this first using a FutureBuilder and keeping a variable for when I was loading or not. Having another layer being rendered caused my widget tree to re-render though and form data to be lost. It also added a lot more complexity to the screen that simply didn’t feel like it belonged there.
I came across an answer from Stackoverflow using a dialog. This turned out a real clean and small solution. I even wrapped this in some helper functions leading my final usage to look like this:
final overlay = LoadingOverlay.of(context); final result = await overlay.during(widget.authentication.signUp(email, password));
The overlay code is also small enough to easily copy/paste into your project:
Two things worry me though:
- Popping the navigator like this without being 100% sure we’re popping it from a valid state.
- Keeping the context as a variable in order to close after finishing. The context is very much alive and I’ve had all sorts of issues with keeping it as a member as opposed to passing it in.
However, with a bit more tweaking we could make that a bit prettier/safer and all-in-all this solution works swell from what I can see. I really like the way it’s wrappable in a way that the execution of the future doesn’t need to care about the rendering.
How do you solve overlays for progress? Any tips?
On page init time,
this Overlay not working. It says “dependOnInheritedElement was called before initstate”
Hi Rashedul, sorry for the late reply. Can you share your code?
As I’m running my example and it works maybe it has to do with how/where you are applying it. It sounds as though maybe you are doing something in the initState() method?
Everything works like a CHARM 🙂
THANKS A LOT !!!
Awesome, glad it helped!
30 Minutes trying to get some libraries to work and than I found this 😊
Thank you very much for the help!
Only had to change the show function, since showDialog has no child. Currently this has to be:
builder: (BuildContext context) => _FullScreenLoader());
That’s excellent, thank you! I updated the example and took the opportunity to convert it to a live dartpad whilst at it.
Thank you good man! Very simple and concise solution.
Cheers!