Question

我正在使用Flutter重新构建已在Cordova中使用HTML5完成的应用程序。

我需要一个无需更改路由即可模拟通知弹出菜单的插件或小部件。

有什么吗？

我将提供一个屏幕截图：

Answer 1

这是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();
            },
          ),
        ],
      );
    },
  );
}

或者，您可以使用Stack class获得更大的灵活性

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),
            ),
          ),
        ],
      ),
    )

Answer 2

最后，我使用了堆栈。我读编辑后的答案为时已晚，但结果是相同的。

这是每个人的原型类：

        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,
                )
              ],
            );
          }


        }

现在唯一的问题是如何捕获backbutton事件，因为通常在用户看到通知时，他们按下back按钮将其隐藏...

通知浮动弹出菜单

2 个答案: