Implemented Overlay In Flutter
Whenever you will code for building anything in Flutter, it will be inside a widget. The focal intention is to build the application out of widgets. It portrays how your application view ought to look with its ongoing configuration and state. At the point when you made any adjustment in the code, the widget revamps its depiction by computing the contrast between the past and current widget to decide the negligible changes for delivering in the UI of the application.
Widgets are settled with one another to build the application. It implies the base of your application is itself a widget, and right down is a widget moreover. For instance, a widget can show something, can characterize design, can deal with collaboration, and so on.
In this post, we will explore the Implemented Overlay In Flutter. We will also implement a demo program of overlay, and to implement Overlay in Flutter we need to know about two Flutter built-in classes OverlayEntry class and the OverlayState class.
Table Of Contents::
Introduction:
Overlays let independent child widgets “float” visual components on top of different widgets by embedding them into the overlay’s stack. The overlay gives every one of these widgets dealing with their support access to the overlay utilizing OverlayEntry objects.
The Overlay widget utilizes a custom stack execution, which is the same as the Stack widget. The primary use instance of Overlay is connected with the route and has the option to embed widgets on top of the pages in an application. To just show a pile of widgets, think about utilizing Stack all things considered.
Demo Module ::
The above demo video shows how to implement an overlay in a flutter and shows how the overlay will work using the OverlayEntry & OverlayState in your flutter applications. We will show a user when clicking on the button and then, show a different three container box with text and remove it according to delay of seconds. It will be shown on your device.
OverlayEntry:
A place in an Overlay that can contain a widget. Overlay entries are embedded into an Overlay utilizing the OverlayState.insert or OverlayState.insertAll functions. To find the nearest encasing overlay for a given BuildContext, utilize the Overlay. of function.
An overlay section can be in all things considered each overlay in turn. To remove an entry from its overlay, call the remove function on the overlay entry. Since an Overlay utilizes a Stack format, overlay sections can utilize Positioned and AnimatedPositioned to situate themselves inside the overlay.
> OverlayEntry Construction:
To utilize OverlayEntry, you need to call the constructor underneath:
OverlayEntry({
required this.builder,
bool opaque = false,
bool maintainState = false,
})
All fields marked with @required must not be empty in the above Constructor.
> OverlayEntry Properties:
There are some parameters of OverlayEntry are:
- > builder: This property is utilized for this entry and will incorporate the widget built by this builder in the overlay of the entry’s situation.
- > opaque: This property is utilized to take a bool value that chooses whether this entry impedes the whole overlay. On the off chance that an entry professes to be opaque, for proficiency, the overlay will skip building entries underneath that entry except if they have a maintainState set.
- > maintainState: This property is utilized to take bool value and if set true, it strongly builds the blocked entries under an opaque entry.
> OverlayEntry Methods:
There are only one methods of OverlayEntry are:
- > remove: This method is used to remove this entry from the overlay.
OverlayState:
The current state of an Overlay is used to insert OverlayEntries into the overlay.
> OverlayState Methods:
There are some method of OverlayState are:
- > debugIsVisible: This method is utilized to check regardless of whether the given OverlayEntry is visible and returns a bool.
- > insert: This method is utilized to embed the given OverlayEntry into the Overlay.
- > insertAll: This method is utilized to take a List of OverlayEntries and embeds every one of the entries into the Overlay. You can likewise determine the above-mentioned and underneath properties to state in which request entries are to be embedded.
- > rearrange: This method is utilized to remove every one of the entries listed in the given List of OverlayEntries, then reinsert them into the overlay in the given order.
Code Implement:
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main. dart file. Inside, we will create an OverlayDemo() class. In this class, we will create a Column widget. In this widget, we will add crossAxisAlignment and mainAxisAlignment as the center. Also, Add an image and Material Button(). In this button, we will add color, height, width, and the onPressed() method. In this method, we will add _showOverlay(context) Function. We will deeply describe it below later. Also, we will add the Text ‘show Overlay’.
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/logo.png',height: 300,width: 350,),
const SizedBox(height: 50,),
MaterialButton(
color: Colors.pink[300],
minWidth: MediaQuery.of(context).size.width * 0.4,
height: MediaQuery.of(context).size.height * 0.06,
child: const Text(
'show Overlay',
style: TextStyle(color: Colors.white,fontSize: 17),
),
onPressed: () {
//calling the _showOverlay method
// when Button is pressed
_showOverlay(context);
},
),
],
)
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will deeply describe _showOverlay(context) Function:
First, we will be Declaring and Initializing OverlayState and
OverlayEntry objects.
OverlayState? overlayState = Overlay.of(context);
OverlayEntry overlay1;
OverlayEntry overlay2;
OverlayEntry overlay3;
Then, we will create overlay1 that is equal to the theOverlayEntry(). We can return any widget we like here to be displayed on the Overlay. We will return Positioned widget with ClipRRect and inside add a container with height, width, and color. Its child, we will add Material with color and text.
overlay1 = OverlayEntry(builder: (context) {
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.11,
color: Colors.orange.withOpacity(0.5),
child: Material(
color: Colors.transparent,
child: Text('The Flutter app developers at FlutterDevs have',
style: TextStyle(
fontSize: MediaQuery.of(context).size.height * 0.03,
//fontWeight: FontWeight.bold,
color: Colors.white)),
),
),
),
);
});
Same as above for overlay2. The change was the color of the container and text on the Material widget. All the process was the same.
overlay2 = OverlayEntry(builder: (context) {
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.11,
color: Colors.pink.withOpacity(0.5),
child: Material(
color: Colors.transparent,
child: Text('decades of industry experience under a single roof,',
style: TextStyle(
fontSize: MediaQuery.of(context).size.height * 0.03,
//fontWeight: FontWeight.bold,
color: Colors.white)),
),
),
),
);
});
Same as above for overlay3. The change was the color of the container and text on the Material widget. All the process was the same. User can add any return widget you like here to be displayed on the Overlay.
overlay3 = OverlayEntry(builder: (context) {
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.11,
color: Colors.blue.withOpacity(0.5),
child: Material(
color: Colors.transparent,
child: Text('and this empowers us to serve you with excellence.',
style: TextStyle(
fontSize: MediaQuery.of(context).size.height * 0.03,
//fontWeight: FontWeight.bold,
color: Colors.white)),
),
),
),
);
});
After the instatement of OverlayEntries I have called the insertAll technique for OverlayState and passed it to the List of OverlayEntries, this adds every one of the Entries to the Overlay.
overlayState?.insertAll([overlay1, overlay2, overlay3]);
From that point forward, I have awaited on Future. delayed to make a delay of 2 seconds and afterward called remove strategy to remove the first OverlayEntry from the Overlay and afterward correspondingly I have delayed for one second then called remove for the second OverlayEntry and afterward again postponed for 1seconds and called remove for the third and last OverlayEntry, this causes the OverlayEntries to disappear one after another.
await Future.delayed(const Duration(seconds: 2));
overlay1.remove();
await Future.delayed(const Duration(seconds: 1));
overlay2.remove();
await Future.delayed(const Duration(seconds: 1));
overlay3.remove();
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_overlay_demo/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.cyan,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}
class OverlayDemo extends StatefulWidget {
const OverlayDemo({Key? key}) : super(key: key);
@override
_OverlayDemoState createState() => _OverlayDemoState();
}
class _OverlayDemoState extends State<OverlayDemo> {
void _showOverlay(BuildContext context) async {
OverlayState? overlayState = Overlay.of(context);
OverlayEntry overlay1;
OverlayEntry overlay2;
OverlayEntry overlay3;
overlay1 = OverlayEntry(builder: (context) {
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.11,
color: Colors.orange.withOpacity(0.5),
child: Material(
color: Colors.transparent,
child: Text('The Flutter app developers at FlutterDevs have',
style: TextStyle(
fontSize: MediaQuery.of(context).size.height * 0.03,
//fontWeight: FontWeight.bold,
color: Colors.white)),
),
),
),
);
});
overlay2 = OverlayEntry(builder: (context) {
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.11,
color: Colors.pink.withOpacity(0.5),
child: Material(
color: Colors.transparent,
child: Text('decades of industry experience under a single roof,',
style: TextStyle(
fontSize: MediaQuery.of(context).size.height * 0.03,
//fontWeight: FontWeight.bold,
color: Colors.white)),
),
),
),
);
});
overlay3 = OverlayEntry(builder: (context) {
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.11,
color: Colors.blue.withOpacity(0.5),
child: Material(
color: Colors.transparent,
child: Text('and this empowers us to serve you with excellence.',
style: TextStyle(
fontSize: MediaQuery.of(context).size.height * 0.03,
//fontWeight: FontWeight.bold,
color: Colors.white)),
),
),
),
);
});
overlayState?.insertAll([overlay1, overlay2, overlay3]);
await Future.delayed(const Duration(seconds: 2));
overlay1.remove();
await Future.delayed(const Duration(seconds: 1));
overlay2.remove();
await Future.delayed(const Duration(seconds: 1));
overlay3.remove();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[50],
appBar: AppBar(
title: const Text(
'Flutter Overlay Demo',
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: SafeArea(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/logo.png',
height: 300,
width: 350,
),
const SizedBox(
height: 50,
),
MaterialButton(
color: Colors.pink[300],
minWidth: MediaQuery.of(context).size.width * 0.4,
height: MediaQuery.of(context).size.height * 0.06,
child: const Text(
'show Overlay',
style: TextStyle(color: Colors.white, fontSize: 17),
),
onPressed: () {
_showOverlay(context);
},
),
],
))),
);
}
}
Conclusion:
In the article, I have explained the Overlay basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Overlay On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Overlay in your flutter projects. We will show you what the Introduction is?. What are the OverlayState and OverlayEntry, make a demo program for working Overlay using the OverlayEntry & OverlayState in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
