设置宽度SnackBar

Question

我正在设置一个SnackBar，并希望设置它的最大宽度，这将受到字段宽度的限制，以填充信息(我在图片中用红色标记边框)。

使用BoxConstraints (maxWidth: 800)填充信息的字段本身。

如何限制SnackBar的最大宽度？

class _FormForDeviceUpdate extends State {
  final _formKey = GlobalKey<FormState>();

  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Align(
            alignment: Alignment.topCenter,
            child: Container(
                constraints: const BoxConstraints(maxWidth: 800),
                padding: const EdgeInsets.all(10.0),
                child: Form(
                    key: _formKey,
                    child: Column(
                      children: <Widget>[
                        new Text(
                          'Desire operation system version',
                          style: TextStyle(fontSize: 20.0),
                        ),
                        
                        ElevatedButton(
                          onPressed: () {
                            if (_formKey.currentState!.validate()) {
                              _formKey.currentState?.reset();
                              ScaffoldMessenger.of(context)
                                  .showSnackBar(SnackBar(
                                content: const Text(
                                  'Your request has been sent to the administrator',
                                  style: TextStyle(color: Colors.black),
                                ),
                                backgroundColor: Colors.yellow,
                                duration: const Duration(seconds: 4),
                                action: SnackBarAction(
                                  label: 'Dismiss',
                                  textColor: Colors.black,
                                  onPressed: () {},
                                ),
                                behavior: SnackBarBehavior.floating,
                                shape: const RoundedRectangleBorder(
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(20))),
                              ));
                            }
                          },
                          child: const Text(
                            'Submit',
                            style: TextStyle(color: Colors.black),
                          ),
                          style: ButtonStyle(
                              backgroundColor:
                                  MaterialStateProperty.all(Colors.yellow)),
                        )
                      ],
                    )))));
  }
}

​

​

Answer 1

您可以用From包装LayoutBuilder，以获得它的父constraints，并将constraints.maxwidth分配给Snackbar width属性，如下所示：

Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Align(
        alignment: Alignment.topCenter,
        child: Container(
          color: Colors.grey,
          constraints: const BoxConstraints(maxWidth: 800),
          padding: const EdgeInsets.all(10.0),
          child: LayoutBuilder(
            builder: (context, constraints) {
              return Form(
                key: _formKey,
                child: Column(
                  children: <Widget>[
                    new Text(
                      'Desire operation system version',
                      style: TextStyle(fontSize: 20.0),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        if (_formKey.currentState!.validate()) {
                          _formKey.currentState?.reset();
                          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            width: constraints.maxWidth,
                            content: const Text(
                              'Your request has been sent to the administrator',
                              style: TextStyle(color: Colors.black),
                            ),
                            backgroundColor: Colors.yellow,
                            duration: const Duration(seconds: 4),
                            action: SnackBarAction(
                              label: 'Dismiss',
                              textColor: Colors.black,
                              onPressed: () {},
                            ),
                            behavior: SnackBarBehavior.floating,
                            shape: const RoundedRectangleBorder(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(20))),
                          ));
                        }
                      },
                      child: const Text(
                        'Submit',
                        style: TextStyle(color: Colors.black),
                      ),
                      style: ButtonStyle(
                          backgroundColor:
                              MaterialStateProperty.all(Colors.yellow)),
                    )
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }

请记住，constraints也将考虑到padding的计算，因此如果您的Container有width: 800和padding: EdgeInsets.all(10.0)，那么当它从父级的最大值width中减去left和right padding时，约束将给出780的maxwidth。

Answer 2

尝试下面的代码，希望它对您有帮助，只需设置 of

您的Snackbar方法：

   lastLeadSubmitSnackBar() {
    final snackBar =SnackBar(
      width: 150,
      content: Text('Snackbar Width'),
      backgroundColor: Colors.blue,
      elevation: 6.0,
      duration: Duration(seconds: 2),
      behavior: SnackBarBehavior.floating,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(20),
        ),
      ),
    );
  }

你的寡妇：

 ElevatedButton(
        onPressed: () => lastLeadSubmitSnackBar(),
        child: Text(
          'Snack',
        ),
      ),

你的成绩->

​

Answer 3

不要在web或windows上使用SnackBar，而是使用bot_toast

这是链接，请通过这个链接

https://pub.dev/packages/bot_toast

它比SnackBar好多了