Overlays in Flutter

3 min readJul 25, 2020

Photo by **freestocks.org** from **Pexels**

A quick introduction to the article, this article is all about following the best possible way to show loading indicators in a Flutter app, avoiding boiler plate code and force rendering ui. Inspired from an article by Jose Alba.

Package link: https://pub.dev/packages/ots

If you often use Stack for showing loading indication in your flutter application, then you might be doing a lot of work. Not just you even the app has to do a lot of work, because you definitely need to manage/change the state to show/hide the loader and even if you don’t use Stack, then a loader must be present in the widget tree, which can be a huge boiler plate and complex stuff.

Flutter has support for Overlay, which can solve this huge issue and can help you write your code better. You can insert widget entries into your application without involving it to be added to the main widget tree(the screen you work on). It just inserts the widget on top of the screen. Let’s look at how to implement such a model in our Flutter application.

Configuring overlay

Using an overlay is very simple, we just need the context to insert a widget as Overlay, we call the inserting widget as OverlayEntry. Let’s have a look how can we define a global overlay widget.

build method

Let’s assume this is a screen, I knew this isn’t but just assume we have lot more stuff along with these minimal widgets. When you click on the container which is occupying some height and width and colored in redAccent, an overlay of CircularProgressIndicator pops up. As per our code it will get dismissed after 2 seconds.

Understanding the code

Basically onTap of the container is calling showOverlay method and the whole magic is done by this method.

Context

We’re getting the context, by making use of the GlobalKey, which we have attached to Scaffold in build method. We will use this context to show the overlay.

OverlayEntry

Here we will build our widget that we would like to show as an Overlay. Here we will also have the access to context also.

Overlay

Here we will make use of the context we’ve got from the GlobalKey. Here we’ll insert the entry. Once we’ve got it inserted into the widget tree, we can use the OverlayEntry’s instance we’ve created in previous step and remove it whenever we want it to.

You can find the demo of it here

Yeah we still have some extra configuration to be done, if we want this to work with deeply nested widgets or an application that will have multiple screens. This involves navigating to the current context being used and pick up the OverlayState to make use of the overlay. The code for that is mentioned below.

Yay! You’re finally done, but this is all so heavy configuration stuff and yeah I know it’s difficult to configure everything.

An overlay module pre-built

I have built a module which you can use simply to make use of Overlay and show loading indicators as well as local notifications, changes in network connection. You can find the steps for installing and using the module from GitHub.