Flutter – Implementing Overlay
Overlays let independent child widgets float visual elements on top of other widgets by inserting them into the overlay’s Stack.
This article discusses the implementation of Overlays in Flutter. To implement Overlay in Flutter we need to know about two Flutter built-in classes OverlayEntry class and the OverlayState class.
OverlayEntry :
Vaguely speaking OverlayEntry is a place in an Overlay that can contain a widget.
Constructor for OverlayEntry class :
OverlayEntry(
{
required WidgetBuilder builder,
bool opaque = false,
bool maintainState = false
}
)Properties of OverlayEntry class :
- builder: Takes a widget builder.
- opaque: Takes a bool value that decides whether this entry occludes the entire overlay. If an entry claims to be opaque, then, for efficiency, the overlay will skip building entries below that entry unless they have maintainState set.
- maintainState: Takes a bool value and if set true it forcefully builds the occluded entries below an opaque entry.
Methods of OverlayEntry class :
- remove: Removes this entry from the overlay.
OverlayState :
The current state of an Overlay is used to insert OverlayEntries into the overlay.
Methods of OverlayState class :
- debugIsVisible: Checks whether the given OverlayEntry is visible or not and returns a bool.
- insert: Inserts the given OverlayEntry into the Overlay.
- insertAll: Takes a List of OverlayEntries and inserts all the entries into the Overlay. You can also specify the above and below properties to state in which order entries are to be inserted.
- rearrange: Remove all the entries listed in the given List of OverlayEntries, then reinsert them into the overlay in the given order.
I know you are not that much interested in reading theory, so let’s head on to some Examples.
Example 1:
Dart
import 'package:flutter/material.dart'; class Example1 extends StatefulWidget { const Example1({Key key}) : super(key: key); @override _Example1State createState() => _Example1State();} class _Example1State extends State<Example1> { void _showOverlay(BuildContext context) async { // Declaring and Initializing OverlayState // and OverlayEntry objects OverlayState overlayState = Overlay.of(context); OverlayEntry overlayEntry; overlayEntry = OverlayEntry(builder: (context) { // You can return any widget you like here // to be displayed on the Overlay return Positioned( left: MediaQuery.of(context).size.width * 0.2, top: MediaQuery.of(context).size.height * 0.3, child: Container( width: MediaQuery.of(context).size.width * 0.8, child: Stack( children: [ Image.asset( 'images/commentCloud.png', colorBlendMode: BlendMode.multiply, ), Positioned( top: MediaQuery.of(context).size.height * 0.13, left: MediaQuery.of(context).size.width * 0.13, child: Row( children: [ Material( color: Colors.transparent, child: Text( 'This is a button!', style: TextStyle( fontSize: MediaQuery.of(context).size.height * 0.03, color: Colors.green), ), ), SizedBox( width: MediaQuery.of(context).size.width * 0.18, ), GestureDetector( onTap: () { // When the icon is pressed the OverlayEntry // is removed from Overlay overlayEntry.remove(); }, child: Icon(Icons.close, color: Colors.green, size: MediaQuery.of(context).size.height * 0.025), ) ], ), ), ], ), ), ); }); // Inserting the OverlayEntry into the Overlay overlayState.insert(overlayEntry); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'GeeksForGeeks Example 2', style: TextStyle(fontWeight: FontWeight.bold), ), ), body: SafeArea( child: Center( child: MaterialButton( color: Colors.green, minWidth: MediaQuery.of(context).size.width * 0.4, height: MediaQuery.of(context).size.height * 0.06, child: Text( 'show Overlay', style: TextStyle(color: Colors.white), ), onPressed: () { // calling the _showOverlay method // when Button is pressed _showOverlay(context); }, ))), ); }} |
Output:
Explanation:
In this flutter app, I have called a function _showOverlay in the onPressed callback of the MaterialButton. In the _showOverlay function, I have declared and initialized OverlayState and OverlayEntry objects. In the OverlayEntry, I have passed the widgets for a Comment Cloud and it has a Text and an Icon, I have wrapped the Icon with a GestureDetector and on its onTap callback, I have called remove function for the OverlayEntry, which removes this entry from the overlay. You can also make an OverlayEntry remove itself automatically after a certain duration, the next Example addresses that. After the initialization of OverlayEntry I have called insert method for OverlayState and passed in the current OverlayEntry, this adds the Entry to the Overlay.
Example 2:
Dart
import 'package:flutter/material.dart'; class Example2 extends StatefulWidget { const Example2({Key key}) : super(key: key); @override _Example2State createState() => _Example2State();} class _Example2State extends State<Example2> { void _showOverlay(BuildContext context) async { // Declaring and Initializing OverlayState // and OverlayEntry objects OverlayState overlayState = Overlay.of(context); OverlayEntry overlayEntry; overlayEntry = OverlayEntry(builder: (context) { // You can return any widget you like // here to be displayed on the Overlay return Positioned( left: MediaQuery.of(context).size.width * 0.2, top: MediaQuery.of(context).size.height * 0.3, child: Container( width: MediaQuery.of(context).size.width * 0.8, child: Stack( children: [ Image.asset( 'images/commentCloud.png', colorBlendMode: BlendMode.multiply, ), Positioned( top: MediaQuery.of(context).size.height * 0.13, left: MediaQuery.of(context).size.width * 0.13, child: Material( color: Colors.transparent, child: Text( 'I will disappear in 3 seconds.', style: TextStyle( fontSize: MediaQuery.of(context).size.height * 0.025, color: Colors.green), ), ), ), ], ), ), ); }); // Inserting the OverlayEntry into the Overlay overlayState.insert(overlayEntry); // Awaiting for 3 seconds await Future.delayed(Duration(seconds: 3)); // Removing the OverlayEntry from the Overlay overlayEntry.remove(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'GeeksForGeeks Example 2', style: TextStyle(fontWeight: FontWeight.bold), ), ), body: SafeArea( child: Center( child: MaterialButton( color: Colors.green, minWidth: MediaQuery.of(context).size.width * 0.4, height: MediaQuery.of(context).size.height * 0.06, child: Text( 'show Overlay', style: TextStyle(color: Colors.white), ), onPressed: () { // calling the _showOverlay method // when Button is pressed _showOverlay(context); }, ))), ); }} |
Output:
Explanation:
In this example, I have called a function _showOverlay in the onPressed callback of the MaterialButton. In the _showOverlay function, I have declared and initialized OverlayState and OverlayEntry objects. In the OverlayEntry, I have passed the widgets for a Comment Cloud and it displays a Text. After the initialization of OverlayEntry I have called insert method for OverlayState and passed in the current OverlayEntry, this adds the Entry to the Overlay. After that I havehttps://github.com/curiousyuvi/overlay_implementation awaited on Future.delayed to make a delay of 3 seconds and then called remove method to remove the current OverlayEntry from the Overlay. This makes the entry appear for 3 seconds and then it disappears.
Example 3:
Dart
import 'package:flutter/material.dart'; class Example3 extends StatefulWidget { const Example3({Key key}) : super(key: key); @override _Example3State createState() => _Example3State();} class _Example3State extends State<Example3> { void _showOverlay(BuildContext context) async { // Declaring and Initializing OverlayState and // OverlayEntry objects OverlayState overlayState = Overlay.of(context); OverlayEntry overlayEntry1; OverlayEntry overlayEntry2; OverlayEntry overlayEntry3; overlayEntry1 = OverlayEntry(builder: (context) { // You can return any widget you like here // to be displayed on the Overlay return Positioned( left: MediaQuery.of(context).size.width * 0.1, top: MediaQuery.of(context).size.height * 0.3, child: ClipRRect( borderRadius: BorderRadius.circular(20), child: Container( padding: EdgeInsets.all(MediaQuery.of(context).size.height * 0.02), width: MediaQuery.of(context).size.width * 0.8, height: MediaQuery.of(context).size.height * 0.1, color: Colors.pink.withOpacity(0.3), child: Material( color: Colors.transparent, child: Text('I will disappear in 3 seconds', style: TextStyle( fontSize: MediaQuery.of(context).size.height * 0.03, fontWeight: FontWeight.bold, color: Colors.white)), ), ), ), ); }); overlayEntry2 = OverlayEntry(builder: (context) { // You can return any widget you like here // to be displayed on the Overlay return Positioned( left: MediaQuery.of(context).size.width * 0.1, top: MediaQuery.of(context).size.height * 0.5, child: ClipRRect( borderRadius: BorderRadius.circular(20), child: Container( padding: EdgeInsets.all(MediaQuery.of(context).size.height * 0.02), width: MediaQuery.of(context).size.width * 0.8, height: MediaQuery.of(context).size.height * 0.1, color: Colors.blue.withOpacity(0.3), child: Material( color: Colors.transparent, child: Text('I will disappear in 5 seconds', style: TextStyle( fontSize: MediaQuery.of(context).size.height * 0.03, fontWeight: FontWeight.bold, color: Colors.white)), ), ), ), ); }); overlayEntry3 = OverlayEntry(builder: (context) { // You can return any widget you like // here to be displayed on the Overlay return Positioned( left: MediaQuery.of(context).size.width * 0.1, top: MediaQuery.of(context).size.height * 0.7, child: ClipRRect( borderRadius: BorderRadius.circular(20), child: Container( padding: EdgeInsets.all(MediaQuery.of(context).size.height * 0.02), width: MediaQuery.of(context).size.width * 0.8, height: MediaQuery.of(context).size.height * 0.1, color: Colors.green.withOpacity(0.3), child: Material( color: Colors.transparent, child: Text('I will disappear in 7 seconds', style: TextStyle( fontSize: MediaQuery.of(context).size.height * 0.03, fontWeight: FontWeight.bold, color: Colors.white)), ), ), ), ); }); // Inserting the OverlayEntry into the Overlay overlayState.insertAll([overlayEntry1, overlayEntry2, overlayEntry3]); // Awaiting for 3 seconds await Future.delayed(Duration(seconds: 3)); // Removing the first OverlayEntry from the Overlay overlayEntry1.remove(); // Awaiting for 2 seconds more await Future.delayed(Duration(seconds: 2)); // Removing the second OverlayEntry from the Overlay overlayEntry2.remove(); // Awaiting for 2 seconds more await Future.delayed(Duration(seconds: 2)); // Removing the third OverlayEntry from the Overlay overlayEntry3.remove(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'GeeksForGeeks Example 3', style: TextStyle(fontWeight: FontWeight.bold), ), ), body: SafeArea( child: Center( child: MaterialButton( color: Colors.green, minWidth: MediaQuery.of(context).size.width * 0.4, height: MediaQuery.of(context).size.height * 0.06, child: Text( 'show Overlay', style: TextStyle(color: Colors.white), ), onPressed: () { //calling the _showOverlay method // when Button is pressed _showOverlay(context); }, ))), ); }} |
Output:
Explanation:
In this example, I have called a function _showOverlay in the onPressed callback of the MaterialButton. In the _showOverlay function, I have declared and initialized OverlayState and three OverlayEntry objects. In these OverlayEntries, I have different colored Containers and they all display a Text. After the initialization of OverlayEntries I have called insertAll method for OverlayState and passed in the List of OverlayEntries, this adds all the Entries to the Overlay. After that I have awaited on Future.delayed to make a delay of 3 seconds and then called remove method to remove the first OverlayEntry from the Overlay and then similarly I have delayed for two seconds then called remove for the second OverlayEntry and then again delayed for 2 seconds and called remove for the third and last OverlayEntry, this makes the OverlayEntries disappear one after another.
Please Login to comment...