Flutter 在Flatter中的网页中显示类似的对话框提示

我想显示一个类似于通知/提示这样的对话框。是否可以在颤振中显示？

您可以复制下面的粘贴运行完整代码
您可以使用软件包
在

publispec.yaml

中，用于解决问题

flushbar:
    git:
      url: https://github.com/AndreHaueisen/flushbar.git
      ref: 13c55a8

代码片段

flush = Flushbar(
      title: "Hey Ninja",
      message:
          "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
      flushbarPosition: FlushbarPosition.TOP,
      flushbarStyle: FlushbarStyle.FLOATING,
      reverseAnimationCurve: Curves.decelerate,
      forwardAnimationCurve: Curves.elasticOut,
      backgroundColor: Colors.red,
      boxShadows: [
        BoxShadow(
            color: Colors.blue[800], offset: Offset(0.0, 2.0), blurRadius: 3.0)
      ],
      backgroundGradient:
          LinearGradient(colors: [Colors.blueGrey, Colors.black]),
      isDismissible: true,

工作演示

完整代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  Flushbar flush;

  void _incrementCounter() {
    flush = Flushbar(
      title: "Hey Ninja",
      message:
          "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
      flushbarPosition: FlushbarPosition.TOP,
      flushbarStyle: FlushbarStyle.FLOATING,
      reverseAnimationCurve: Curves.decelerate,
      forwardAnimationCurve: Curves.elasticOut,
      backgroundColor: Colors.red,
      boxShadows: [
        BoxShadow(
            color: Colors.blue[800], offset: Offset(0.0, 2.0), blurRadius: 3.0)
      ],
      backgroundGradient:
          LinearGradient(colors: [Colors.blueGrey, Colors.black]),
      isDismissible: true,
      //duration: Duration(seconds: 10),
      icon: Icon(
        Icons.camera,
        color: Colors.greenAccent,
      ),
      showProgressIndicator: true,
      progressIndicatorBackgroundColor: Colors.blueGrey,
      titleText: Text(
        "Hello Hero",
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20.0,
            color: Colors.yellow[600],
            fontFamily: "ShadowsIntoLightTwo"),
      ),
      messageText: Column(
        children: <Widget>[
          Text(
            "You killed that giant monster in the city. Congratulations!",
            style: TextStyle(
                fontSize: 18.0,
                color: Colors.green,
                fontFamily: "ShadowsIntoLightTwo"),
          ),
          Row(children: <Widget>[
            FlatButton(
              onPressed: () {
                flush.dismiss();
              },
              child: Text(
                "NO THANKS",
                style: TextStyle(color: Colors.amber),
              ),
            ),
            FlatButton(
              onPressed: () {
                flush.dismiss();
              },
              child: Text(
                "ALLOW",
                style: TextStyle(color: Colors.amber),
              ),
            )
          ])
        ],
      ),
    )..show(context);
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“包：flushbar/flushbar.dart”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（标题：“颤振演示主页”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
int _计数器=0；
冲洗杆冲洗；
void _incrementCounter（）{
刷新=刷新条(
标题：“嗨，忍者”，
信息：
“Lorem Ipsum只是印刷和排版行业的虚拟文本”，
flushbarPosition:flushbarPosition.TOP，
flushbarStyle:flushbarStyle.FLOATING，
反转动画曲线：曲线。减速，
forwardAnimationCurve:Curves.elasticOut，
背景颜色：Colors.red，
箱形阴影：[
箱形阴影(
颜色：颜色。蓝色[800]，偏移量：偏移量（0.0,2.0），模糊半径：3.0）
],
背景梯度：
LinearGradient（颜色：[颜色.蓝灰色，颜色.黑色]），
是的，是的，
//持续时间：持续时间（秒数：10），
图标：图标(
图标，照相机，
颜色：Colors.greenAccent，
),
showProgressIndicator:对，
progressIndicatorBackgroundColor:颜色。蓝灰色，
标题文本：文本(
“你好，英雄”，
样式：TextStyle(
fontWeight:fontWeight.bold，
字体大小：20.0，
颜色：颜色。黄色[600]，
fontFamily:“阴影之光2号”），
),
messageText:列(
儿童：[
正文(
“你在城里杀死了那个巨大的怪物。恭喜你！”，
样式：TextStyle(
字体大小：18.0，
颜色：颜色。绿色，
fontFamily:“阴影之光2号”），
),
世界其他地区（儿童：[
扁平按钮(
已按下：（）{
同花顺；
},
子：文本(
“不，谢谢”，
样式：TextStyle（颜色：Colors.amber），
),
),
扁平按钮(
已按下：（）{
同花顺；
},
子：文本(
“允许”，
样式：TextStyle（颜色：Colors.amber），
),
)
])
],
),
)…显示（上下文）；
设置状态（）{
_计数器++；
});
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
正文：中(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
正文(
“您已经按了这么多次按钮：”，
),
正文(
“$”计数器“，
样式：Theme.of（context）.textTheme.display1，
),
],
),
),
浮动操作按钮：浮动操作按钮(
按下时：\ u递增计数器，
工具提示：“增量”，
子：图标（Icons.add），
),
);
}
}

Hey@chunhunghan这对Flitter web有用吗…？很高兴能帮上忙。如果对您有帮助，请将此标记为答案，谢谢。