更改 Flutter Snackbar 的位置

Posted 2023-02-23

【中文标题】更改 Flutter Snackbar 的位置

【英文标题】：Change position of a Flutter Snackbar

【发布时间】：2019-02-15 10:21:58

【问题描述】：

我想在不满足某些条件时在按钮上方显示一个简单的消失错误消息。似乎 Flutter 的 Snackbar 非常适合这个目的。

但是，我很难将 Snackbar 的位置更改为屏幕底部以外的任何位置。这可能吗？如果没有，是否有更适合此目的的 Widget？

我当前的小吃店代码：

class ContinueButton extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Container(
      margin: const EdgeInsets.only(
          bottom: 24.0, top: 24.0),
      child: Align(
        alignment: FractionalOffset.bottomCenter,
        child: MaterialButton(
          onPressed: () 
            final snackBar = SnackBar(
              content: Text('Yay! A SnackBar!'),
            );
            Scaffold.of(context).showSnackBar(snackBar);
          ,

          child: Text('Continue'),
          height: 40.0,
          minWidth: 300.0,
          color: Colors.greenAccent,
        ),
      ),
    );
  

【参考方案1】：

您可以通过在小吃店内放置一个容器来做到这一点。由于snackbar 可以采用任何小部件并且您可以将其背景颜色更改为透明，因此您可以使用具有自定义填充和边框的容器来产生定位错觉。

SnackBar(content: Container(
  //color: Colors.white,
  decoration: BoxDecoration(color: Colors.white, border: Border.all(width: 2.0, color: Colors.black), borderRadius: BorderRadius.circular(20)),
  margin: EdgeInsets.fromLTRB(0, 0, 0, 75),
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text('Yay! A SnackBar!'),
  ),
), backgroundColor: Colors.transparent, elevation: 1000, behavior: SnackBarBehavior.floating,);

【参考方案2】：

您可以尝试，将行为设置为 SnackBarBehavior.floating 并根据需要设置边距。

SnackBar(
  behavior: SnackBarBehavior.floating,
  margin: EdgeInsets.only(bottom: 100.0),
  content: Text("Hello World!"),
);

【讨论】：

这个解决方案唯一的问题是下面的所有东西都不能点击

【参考方案3】：

恐怕你做不到。

A lightweight message with an optional action which briefly displays at the bottom of the screen.

您可以将其更改为 behavior 和 elevation

【参考方案4】：

很遗憾，没有。但是您可以使用https://api.flutter.dev/flutter/widgets/Overlay-class.html 在另一个小部件上显示一个小部件（在您的情况下，就像一个工具提示小部件）并创建一个类似于 Snackbar 小部件的小部件

【参考方案5】：

您可以使用 Flushbar 代替 SnackBar

查看详情

flushbar

注意：已于 2022 年停产

【参考方案6】：

为我工作：

你可以用'Align'来包裹你的容器。

SnackBar(
    content: GestureDetector(
      onTap: () 
        controller?.close();
      ,
      child: Align(
        alignment: Alignment.topCenter,
        child: Container( ........