更改 Flutter Snackbar 的位置

Question

我想在不满足某些条件时在按钮上方显示一条简单的消失错误消息。 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,
        ),
      ),
    );
  }
}

Answer 1

您可以尝试将行为设置为

SnackBarBehavior.floating 并根据需要设置边距。

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

此解决方案的唯一问题是

下面的所有内容都不可点击。

要解决此可点击问题，请将dismissDirection属性设置为DismissDirection.none。这也意味着可以通过向下拖动来关闭小吃栏的默认属性会丢失。 （默认为

DismissDirection.down）

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

Answer 2

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

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

Answer 3

不幸的是，没有。但是您可以使用

https://api.flutter.dev/flutter/widgets/Overlay-class.html 在另一个小部件上显示一个小部件（在您的情况下，像工具提示小部件一样）并创建一个类似于小吃栏小部件

Answer 4

恐怕你做不到。

带有可选操作的轻量级消息，会短暂显示在屏幕底部。

您只需更改它的

行为 和 海拔

Answer 5

对我有用：

您可以使用“对齐”来包裹容器。

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

Answer 6

您可以使用

Flushbar 代替 SnackBar

查看更多详情

冲水杆

注意：已于2022年停产

Answer 7

聚会有点晚了，但可以使用 ScaffoldMessenger 来控制定位。请参阅

https://docs.flutter.dev/release/writing-changes/scaffold-messenger

而不是使用

ScaffoldMessenger.of(context).showSnackBar(snackBar); 然后，您使用 ScaffoldMesseneger 包装您在 UI 中放置的 Scaffold，并为其提供一个键。使用此键即可显示小吃栏：

final key = GlobalKey<ScaffoldMessengerState>();
ScaffoldMessenger(
      key: key,
      child: Scaffold(
        body: ...
...
key.currentState?.showSnackBar(snackBar);

Answer 8

我也需要在屏幕顶部添加 SnackBar，经过大量搜索，我终于在这里找到了一个，并将分享它，以防有人也需要在顶部添加 SnackBar。

我是这样做的：

final snackBar = SnackBar(
      showCloseIcon: true,
      closeIconColor: Colors.white,
      content: Text('your text', textAlign: TextAlign.center),
      dismissDirection: DismissDirection.up,
      behavior: SnackBarBehavior.floating,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      margin: EdgeInsets.only(
          bottom: MediaQuery.of(context).size.height - 70, left: 10, right: 10),
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);