更改Flutter Snackbar的位置

Question

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

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

我当前的小吃店代码：

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

恐怕你做不到。

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

您只需更改它的行为和高度即可