Notification floating popup menu

Question

i'm re-building an app already done in Cordova with HTML5, using Flutter.

I need a plugin or a Widget that emulate the popup menu of the notification without change routes.

Is there anything?

I'll provide a screenshot:

notification menu

Maybe a Toast relates here - see https://stackoverflow.com/questions/45948168/how-to-create-toast-in-flutter — Nashev, Feb 28 '22 at 07:01
@StefanoV827 the image link is broken consider uploading the image to stackoverflow. — Mahesh Jamdade, Mar 19 '22 at 15:10

F-1 · Accepted Answer · 2019-07-16T07:51:13.973

You could use Dialog class

Here is an example of the AlertDialog

Future<void> _neverSatisfied() async {
  return showDialog<void>(
    context: context,
    barrierDismissible: false, // user must tap button!
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Rewind and remember'),
        content: SingleChildScrollView(
          child: ListBody(
            children: <Widget>[
              Text('You will never be satisfied.'),
              Text('You\’re like me. I’m never satisfied.'),
            ],
          ),
        ),
        actions: <Widget>[
          FlatButton(
            child: Text('Regret'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

Alternatively you can use the Stack class for greater flexibility

SizedBox(
      width: 250,
      height: 250,
      child: Stack(
        children: <Widget>[
          Container(
            width: 250,
            height: 250,
            color: Colors.white,
          ),
          Container(
            padding: EdgeInsets.all(5.0),
            alignment: Alignment.bottomCenter,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: <Color>[
                  Colors.black.withAlpha(0),
                  Colors.black12,
                  Colors.black45
                ],
              ),
            ),
            child: Text(
              "Foreground Text",
              style: TextStyle(color: Colors.white, fontSize: 20.0),
            ),
          ),
        ],
      ),
    )

Correct, you can use the Stack widget if you want more control. Updated answer with their example — F-1, Jul 16 '19 at 07:49
I read too late sorry. I posted the final code. Do you know how to catch the back button event? — StefanoV827, Jul 16 '19 at 13:26
No probs. You'll need to use the WillPopScope class - see answer here https://stackoverflow.com/a/45918186/469335 — F-1, Jul 16 '19 at 14:35

StefanoV827 · Answer 2 · 2019-07-16T13:44:43.533

At the end i used Stacks. I read the edited answer too late, but the result is the same.

Here the prototype class for everyone:

        import 'package:flutter/material.dart';

        class MenuTendina extends StatefulWidget {

          final double opacita;
          final double altezza;
          final Widget child;
          final Widget notifiche;


          MenuTendina({Key key, @required this.child, @required this.notifiche, @required this.opacita, @required this.altezza}) : super(key:key);

          @override
          _MenuTendinaState createState() => _MenuTendinaState();

        }

        class _MenuTendinaState extends State<MenuTendina> {

          Widget child;
          Widget notifiche;
          double opacita;
          double altezza;
          bool mostraTendina = true;

          @override
          Widget build(BuildContext context) {
            return Stack(
              children: <Widget>[
            this.child,
                Container(
                    width: MediaQuery.of(context).size.width,
                    height: (this.mostraTendina) ? MediaQuery.of(context).size.height : 0.0,
                    child: Opacity(
                        opacity: this.opacita,
                        child: Container(
                            color: Colors.black,
                            child: GestureDetector(
                              onTap: () {
                                setState(() {
                                  this.opacita = 0.0;
                                  this.altezza = 0.0;
                                  this.mostraTendina = false;
                                });
                              },
                            )
                        )
                    )
                ),
                AnimatedContainer(
                  decoration: BoxDecoration(
                    boxShadow: [BoxShadow(
                        offset: Offset(0, -5),
                        spreadRadius: 0.0,
                        blurRadius: 20
                    )],
                  ),
                  duration: Duration(milliseconds: 200),
                  width: MediaQuery.of(context).size.width,
                  height: this.altezza,
                  child: this.notifiche,
                )
              ],
            );
          }


        }

The only problem now is how to catch the backbutton event, because usually when the users see the notification, they press the back button to hide them...

Notification floating popup menu

2 Answers2