In this article, we will explore the OverlayPortal In Flutter. We perceive how to execute a demo program. We will tell you the best way to use OverlayPortal in your Flutter applications. It is another Flutter widget presented after Flutter version 3.10.
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction:
A widget that delivers its overlay child on an Overlay. The OverlayPortal utilizes overlayChildBuilder to construct its overlay child and renders it on the predetermined Overlay as though it was embedded utilizing an OverlayEntry, while it can rely upon a similar arrangement of InheritedWidgets like Theme that this widget can rely upon.
Demo Module::
The above demo video shows how to use OverlayPortal in Flutter and how OverlayPortal will work in your Flutter applications. We will show you images when the user taps on those images and then shows texts then again tap on those images texts will disappear. It will be shown on your device.
Constructor:
To utilize OverlayPortal, you need to call the constructor underneath:
const OverlayPortal({
super.key,
required this.controller,
required this.overlayChildBuilder,
this.child,
})Properties:
There are some properties of OverlayPortal:
- > key — This property is used to control how one widget replaces another widget in the tree.
- > controller — This property is utilized by the controller to show, hide, and bring to the top the overlay child.
- > overlayChildBuilder — This property is utilized by the WidgetBuilder used to build a widget beneath this widget in the tree, that renders on the nearest Overlay.
- > child — This property is used for the widget below this widget in the tree.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In this dart file, we will create a new class OverlayPortalDemo(). In this class, we will create two final OverlayPortalControllers _overlayController and _overlayController1 equal to the OverlayPortalController().final OverlayPortalController _tooltipController = OverlayPortalController();
final OverlayPortalController _tooltipController1 = OverlayPortalController();
In the body part, we will return a Column widget. In this widget, we will add two TextButton widgets. In the first TextButton, we will add _overlayController.toggle on the onPressed method, In the child method we will add the OverlayPortal function. For this function, we will add _overlayController on the controller method, In the overlayChildBuilder method, we will return Positioned widget.
Column(
children: [
Expanded(
child: TextButton(
onPressed: _overlayController.toggle,
child: OverlayPortal(
controller: _overlayController,
overlayChildBuilder: (BuildContext context) {
return Positioned(
right: MediaQuery.of(context).size.width*0.22,
top: MediaQuery.of(context).size.height*0.42,
child: const ColoredBox(
color: Colors.black,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'FlutterDevs is a protruding flutter app\ndevelopment company',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
),
),
);
},
child: Image.asset(
'assets/logo.png',
height: 100,
),
),
),
),
Expanded(
child: TextButton(
onPressed: _overlayController1.toggle,
child: OverlayPortal(
controller: _overlayController1,
overlayChildBuilder: (BuildContext context) {
return Positioned(
right: MediaQuery.of(context).size.width*0.07,
bottom: MediaQuery.of(context).size.height*0.1,
child: const ColoredBox(
color: Colors.black,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'AeoLogic is a next generation digital transformation\ncompany that provides digital solutions',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
),
),
);
},
child: Image.asset(
'assets/powered_by.png',
height: 100,
),
),
),
),
],
)In this Positioned widget, we will add text and wrap with the ColoredBox method. In the text button child method, we will add an image. When any user taps on this image then text will be shown on your devices with background color. Second text button all the methods will be the same except controller, image, and text will be changed.
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';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter OverlayPortal Demo'),
centerTitle: true,
backgroundColor: Colors.cyan,
),
body: const Center(child: OverlayPortalDemo()),
),
);
}
}
class OverlayPortalDemo extends StatefulWidget {
const OverlayPortalDemo({super.key});
@override
State<StatefulWidget> createState() => OverlayPortalDemoState();
}
class OverlayPortalDemoState extends State<OverlayPortalDemo> {
final OverlayPortalController _overlayController = OverlayPortalController();
final OverlayPortalController _overlayController1 = OverlayPortalController();
@override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: TextButton(
onPressed: _overlayController.toggle,
child: OverlayPortal(
controller: _overlayController,
overlayChildBuilder: (BuildContext context) {
return Positioned(
right: MediaQuery.of(context).size.width*0.22,
top: MediaQuery.of(context).size.height*0.42,
child: const ColoredBox(
color: Colors.black,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'FlutterDevs is a protruding flutter app\ndevelopment company',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
),
),
);
},
child: Image.asset(
'assets/logo.png',
height: 100,
),
),
),
),
Expanded(
child: TextButton(
onPressed: _overlayController1.toggle,
child: OverlayPortal(
controller: _overlayController1,
overlayChildBuilder: (BuildContext context) {
return Positioned(
right: MediaQuery.of(context).size.width*0.07,
bottom: MediaQuery.of(context).size.height*0.1,
child: const ColoredBox(
color: Colors.black,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'AeoLogic is a next generation digital transformation\ncompany that provides digital solutions',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
),
),
);
},
child: Image.asset(
'assets/powered_by.png',
height: 100,
),
),
),
),
],
);
}
}Conclusion:
In the article, I have explained the OverlayPortal in Flutter; you can modify this code according to your choice. This was a small introduction to the OverlayPortal in Flutter User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying OverlayPortal in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on OverlayPortal and how to create and use it in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I need to correct something? 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! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
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.
