OverlaySupport in Flutter

Overlay means displaying something over an existing surface. Similarly, OverlaySupport in Flutter, it is used to display some notifications/messages/data over another widget.

In this blog, we will discuss how can we integrate the overlay notifications/messages in our app with the help of the overlay_support package.

Steps for Integrating OverlaySupport in Flutter

Step – 1 -> Firstly, we will need to add the “overlay_support” package in our pubspec.yaml file and run “pub get” command.

overlay_support: ^2.0.1

1	overlay_support: ^2.0.1

You can check out the updated version here.

Step – 2 -> Now, we can start using this package in our code.

Here, after adding the package to our project, we will need to first wrap the MaterialApp with OverlaySupport.global so that the OverlaySupport works over the complete app.

OverlaySupport(
        child: new MaterialApp(
          home: MyApp(),
          title: appName,
          initialRoute: '/',
                  ),
      ),

OverlaySupport(

child: new MaterialApp(

home: MyApp(),

title: appName,

initialRoute: '/',

Let’s start —

1. We can display a notification overlay with the help of an OverlayEntry i.e. showSimpleNotification().

It has various properties like context, background, subtitle,autoDismiss, etc.

return showSimpleNotification(Text("Success",style: TextStyle(fontSize: 16.0,fontWeight: FontWeight.bold,color: Colors.white),),
        context: context,
        background: Colors.lightGreen,
        leading: Icon(
          Icons.check_circle,
          color: Colors.white,
        ),
        slideDismissDirection: DismissDirection.up,
        subtitle: Text(msg,style: TextStyle(color: Colors.white),));

return showSimpleNotification(Text("Success",style: TextStyle(fontSize: 16.0,fontWeight: FontWeight.bold,color: Colors.white),),

context: context,

background: Colors.lightGreen,

leading: Icon(

Icons.check_circle,

color: Colors.white,

slideDismissDirection: DismissDirection.up,

subtitle: Text(msg,style: TextStyle(color: Colors.white),));

2. We can display a toast overlay with the help of toast(). It requires a message field and has properties like context and duration.

return toast("Success",context: context,duration: Duration(seconds: 1));

1	return toast("Success",context: context,duration: Duration(seconds: 1));

3. We can display a custom notification with the help of showOverlayNotification().

4. We can display a custom overlay widget with the help of showOverlay().

Code Sample-

import 'package:flutter/material.dart';
import 'package:overlay_support/overlay_support.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const OverlaySupport.global(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("OverlayDemo"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  showSimpleNotification(
                    const Text(
                      "Success",
                      style: TextStyle(
                          fontSize: 16.0,
                          fontWeight: FontWeight.bold,
                          color: Colors.white),
                    ),
                    context: context,
                    background: Colors.lightGreen,
                    leading: const Icon(
                      Icons.check_circle,
                      color: Colors.white,
                    ),
                    slideDismissDirection: DismissDirection.up,
                  );
                },
                child:const Text("Show Notification")),
            ElevatedButton(
                onPressed: () {
                  showOverlayNotification(
                    (context) {
                            return SafeArea(child: Container(
                              width: MediaQuery.of(context).size.width,
                              height: 40.0,
                              child: const Card(
                                color: Colors.yellow,
                                child: Text("Hello",style: TextStyle(fontSize: 20.0),textAlign: TextAlign.center),
                              ),
                            ));
                    },
                    context: context,
                    duration: const Duration(seconds: 4)
                  );
                },
                child: const Text("Show Custom Notification")),
            ElevatedButton(
                onPressed: () {
                  toast("Success",
                      context: context, duration: const Duration(seconds: 1));
                },
                child: const Text("Show Toast")),
            ElevatedButton(
                onPressed: () {
                  showOverlay((context, _) {
                    return Opacity(
                      opacity: 1,
                      child: SafeArea(
                        child: Scaffold(
                          body: Container(height:100,width:MediaQuery.of(context).size.width,color:Colors.redAccent,child: const Center(child:Text("Welcome To Overlay Support Demo")))),
                      ),
                    );
                  });
                }, child: const Text("Show Custom Overlay")),
          ],
        ),
      ),
    );
  }
}

100

101

import 'package:flutter/material.dart';

import 'package:overlay_support/overlay_support.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override

Widget build(BuildContext context) {

return const OverlaySupport.global(

child: MaterialApp(

debugShowCheckedModeBanner: false,

home: MyHomePage(),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key}) : super(key: key);

@override

MyHomePageState createState() => MyHomePageState();

}

class MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text("OverlayDemo"),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.center,

children: [

ElevatedButton(

onPressed: () {

showSimpleNotification(

const Text(

"Success",

style: TextStyle(

fontSize: 16.0,

fontWeight: FontWeight.bold,

color: Colors.white),

context: context,

background: Colors.lightGreen,

leading: const Icon(

Icons.check_circle,

color: Colors.white,

slideDismissDirection: DismissDirection.up,

);

child:const Text("Show Notification")),

ElevatedButton(

onPressed: () {

showOverlayNotification(

(context) {

return SafeArea(child: Container(

width: MediaQuery.of(context).size.width,

height: 40.0,

child: const Card(

color: Colors.yellow,

child: Text("Hello",style: TextStyle(fontSize: 20.0),textAlign: TextAlign.center),

));

context: context,

duration: const Duration(seconds: 4)

);

child: const Text("Show Custom Notification")),

ElevatedButton(

onPressed: () {

toast("Success",

context: context, duration: const Duration(seconds: 1));

child: const Text("Show Toast")),

ElevatedButton(

onPressed: () {

showOverlay((context, _) {

return Opacity(

opacity: 1,

child: SafeArea(

child: Scaffold(

body: Container(height:100,width:MediaQuery.of(context).size.width,color:Colors.redAccent,child: const Center(child:Text("Welcome To Overlay Support Demo")))),

);

});

}, child: const Text("Show Custom Overlay")),

);

}

Conclusion

In this blog, we have discussed how we can integrate Overlay Support in Flutter.

I hope it will help you out in understanding and get a brief idea about it.

References

https://api.flutter.dev/flutter/widgets/Draggable-class.html

Tanya Goel 1 November 2022

. . .

OverlaySupport in Flutter

Steps for Integrating OverlaySupport in Flutter

Code Sample-

Conclusion

References

Leave a Comment Cancel Reply

Message Sent!