如何向 Snackbar 添加边距或填充？

Question

我一直在 Snackbar 上工作，并在我的项目中取得了成功。但是，我想将这个小东西添加到 Snackbar 中，那就是margins. 我在这个链接中看到过：Snackbars - Material Design

我真的希望我的 Snackbar 像这样：

我现在得到的是这个：

我的代码是：

final snackBar = SnackBar(
    content: Text("Feild(s) are empty!"),
    duration: new Duration(seconds: 1),
    backgroundColor: Theme.of(context).primaryColor,
  );
  Scaffold.of(context).showSnackBar(snackBar);
}

Answer 1

Flutter 团队已更新了小吃店以匹配此PR中的材料设计。您可以通过设置简单地获得新行为

行为：SnackBarBehavior.floating

这是一个示例代码

final snackBar = SnackBar(
  elevation: 6.0,
  backgroundColor: Configs.current.COLORS_PRIMARY,
  behavior: SnackBarBehavior.floating,
  content: Text(
    "Snack bar test",
    style: TextStyle(color: Colors.white),
  ),
);

结果看起来像这样

Answer 2

不确定利润率。圆角 SnackBar 可以像这样创建：

Scaffold
    .of(context)
    .showSnackBar(
        SnackBar(
            content: Text(message),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(20)))));

在上面使用所需的边界半径。

更新：您可以使用浮动SnackBar来添加默认边距。下面传递给SnackBar构造函数：

Scaffold
.of(context)
.showSnackBar(
    SnackBar(
        content: Text(message),
        behavior: SnackBarBehavior.floating,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(20)))));

Answer 3

截屏：

最小代码：

var snackbar = SnackBar(
  content: Text('Hello World!'),
  margin: EdgeInsets.all(20),
  behavior: SnackBarBehavior.floating,
);
Scaffold.of(context).showSnackBar(snackbar);

完整代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Builder(builder: (context) {
        return RaisedButton(
          onPressed: () {
            var snackbar = SnackBar(
              content: Text('Hello World!'),
              margin: EdgeInsets.all(20),
              behavior: SnackBarBehavior.floating,
            );
            Scaffold.of(context).showSnackBar(snackbar);
          },
          child: Text('Show SnackBar'),
        );
      }),
    ),
  );
}