Flutter - 如何降低小吃店的高度并增加它与屏幕底部的距离答案

【问题标题】：Flutter - How to decrease the height of snackbar and increase it's distance from the bottom of screenFlutter - 如何降低小吃店的高度并增加它与屏幕底部的距离
【发布时间】：2022-01-03 06:41:32
【问题描述】：

我正在尝试制作一个具有像这样的小吃栏的 UI -

但我得到了 UI -

如何减小snackbar 的宽度，并将其放置在屏幕底部上方？

这里是代码-

ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          width: MediaQuery.of(context).size.width*0.46,
                          elevation: 5.0,
                          behavior: SnackBarBehavior.floating,
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(35.0)),
                          content: Wrap(
                            children: [
                              Container(
                                //height: 20,
                                child: Center(
                                  child: Text(
                                    'Please enter valid email',
                                  ),
                                ),
                              ),
                            ],
                          ),
                        )
                      );

我尝试为小吃店提供保证金，例如 -

SnackBar(
                          width: MediaQuery.of(context).size.width*0.46,
                          elevation: 5.0,
                          margin: EdgeInsets.fromLTRB(0, 0, 0, 10),

但是，它给了我一个例外，即超出宽度或边距，一个应该为空 -

Failed assertion: line 210 pos 10: 'width == null || margin == null': Width and margin can not be used together

【问题讨论】：

标签： android ios flutter dart

【解决方案1】：

您可以轻松使用此软件包：link

这个包已经准备好用于你想要的了。

【讨论】：

【解决方案2】：

如文档中所述，margin can not be used if width is specified。

将水平边距定义为MediaQuery.of(context).size.width 的 27% 似乎可以达到您想要达到的效果：

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    margin: EdgeInsets.symmetric(
      vertical: 20.0,
      horizontal: MediaQuery.of(context).size.width * 0.27,
    ),
    elevation: 5.0,
    behavior: SnackBarBehavior.floating,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(35.0),
    ),
    content: Wrap(
      children: const [
        Center(
          child: Text(
            'Please enter valid email',
          ),
        ),
      ],
    ),
  ),
);

【讨论】：