dooboolab
Published in

dooboolab

[Flutter] Introduce how to create a custom notification window using overlay

I recently looked for a notification package while working on my project, but I didn’t like the design.

So I decided to make it myself and today I would like to introduce that basic concept of overlay.

What is the overlay that Flutter says?

Official documents describe overlay as follows.

Overlays let independent child widgets “float” visual elements on top of other widgets by inserting them into the overlay’s Stack.

That is, overwriting a widget on the screen.

We can use this to create a custom notification widget. Then let’s find out how we can make this.

According to the official document, using Overlay requires two objects:

  1. OverlayEntry class

A place in an Overlay that can contain a widget.

Overlay entries are inserted into an Overlay using the OverlayState.insert or OverlayState.insertAll functions. To find the closest enclosing overlay for a given BuildContext, use the Overlay.of function.

An overlay entry can be in at most one overlay at a time. To remove an entry from its overlay, call the remove function on the overlay entry.

OverlayEntry is a widget that becomes a parent. The widget to be displayed on the overlaid screen should be placed in the child element of the OverlayEntry widget.

2. OverlayState class

The current state of an Overlay.

Used to insert OverlayEntrys into the overlay using the insert and insertAll functions.

You can use the OverlayState object to create and remove the overlay widget.

The codes using this are as follows.

This code shows the notification window on the screen for 2 seconds and disappears.

Using the animation widget provided by Flutter, you can create a more beautiful notification window.

If I have a chance, I will introduce the animation widget when I write about it.

Happy coding, everyone! 😁

--

--

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