有没有办法实现 Flutter 顶级小吃店？答案

【问题标题】：Is there any way to achieve a Flutter top snackbar?有没有办法实现 Flutter 顶级小吃店？
【发布时间】：2019-06-09 05:41:43
【问题描述】：

我想创建一个简单的snackbar，它来自屏幕顶部而不是底部。在flutter中我使用了本地snackbar，但它没有这样的功能。

【问题讨论】：

你检查答案了吗？
我需要类似snackbar的东西，吐司是可以的，但前提是如果我没有找到任何解决方案。
我的错，我误读了这个问题。让我更新答案。
给你，我更新了答案。

标签： android ios flutter

【解决方案1】：

您可以使用https://pub.dartlang.org/packages/flushbar

RaisedButton(
  child: Text('Show Top Snackbar'),
  onPressed: () {
    Flushbar(
      flushbarPosition: FlushbarPosition.TOP,
    )
      ..title = "Hey Ninja"
      ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
      ..duration = Duration(seconds: 3)
      ..show(context);
  },
),

【讨论】：

是的，我也使用过这个插件，但是如果你连续显示两个小吃栏，而不是旧的不会自行关闭，它就会有一个重大错误。这就是为什么我一直在寻找一些替代方案。感谢您的帮助，但我正在寻找更多的东西。如果您有更多的建议而不是建议。
好吧，你可以尝试阻止用户同时创建2个snackbars。
这听起来不像是我的错误。我相信小吃店的行为方式相同。想象一下，有 5 条消息要同时显示，并且由于之前的消息会自动关闭以显示下一条，因此只会出现最后一个快餐栏。
不，这个插件实际上发生的情况是，如果我们在按钮单击时显示一条消息，并且您非常快地按下按钮 8 次，您会依次获得 8 个小吃吧，那么只有最近的会自行关闭，而其他人会一直呆在那里，直到您将它们刷出，这意味着您需要刷 7 个不方便用户使用的小吃店。
flushbar 现在在 pub.dev 上被标记为“已停产”?

【解决方案2】：

我用这个得到了这个结果。该键由构建在小部件内的 Scaffold 使用。

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback(_onBuildCompleted);
  }

  var scaffoldKey = new GlobalKey<ScaffoldState>();

  _onBuildCompleted(_) {
    print("SHOWN" * 3);

    scaffoldKey.currentState.showSnackBar(
        new SnackBar(backgroundColor: Colors.blue[600], content: Continue()));
    // Navigator.of(context).push(_createRoute());
  }

【讨论】：

这将使小吃店从底部出现。
啊，在我的坏事之前我没有注意到这一点：S.

【解决方案3】：

用Column 包裹小部件并将mainAxisAlignment 设置为MainAxisAlignment.start。另外，设置 SnackBar 的颜色为透明。

Column(
     mainAxisAlignment: MainAxisAlignment.start,
      children: [yourWidget()], ),

【讨论】：

【解决方案4】：

2021 年 1 月。也可以使用 Getx 包 - https://pub.dev/packages/get

只需使用代码

Get.snackbar(
  'message',
  'message body',
  onTap: (_) => DoSomething(),
  duration: Duration(seconds: 4),
  animationDuration: Duration(milliseconds: 800),
  snackPosition: SnackPosition.TOP,
);

BONUS:) 您可以在没有上下文的情况下调用它 - 从控制器、函数、BLoC 等。

查看精彩教程https://www.youtube.com/watch?v=RaqPIoJSTtI&t=503s

【讨论】：

【解决方案5】：

使用这个包https://pub.dev/packages/another_flushbar

Flushbar(
  message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
  icon: Icon(
    Icons.info_outline,
    size: 28.0,
    color: Colors.blue[300],
    ),
  duration: Duration(seconds: 3),
  leftBarIndicatorColor: Colors.blue[300],
)..show(context);

【讨论】：

【解决方案6】：

您可以使用设备的高度设置边距以实现此目的：

ScaffoldMessenger.of(context).showSnackBar(new SnackBar(
    content: Text('Snackbar message'),
    behavior: SnackBarBehavior.floating,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(24),
    ),
    margin: EdgeInsets.only(
        bottom: MediaQuery.of(context).size.height - 100,
        right: 20,
        left: 20),
  ));

【讨论】：

为我工作感谢@David Jentjens