Set width SnackBar

I’m setting up a SnackBar and would like to set its maximum width, which would be limited by the width of the field for filling in information (I marked the borders in red in the picture).

The field itself for filling in information I limit using BoxConstraints (maxWidth: 800).

How can I limit the maximum width of the 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)),
                        )
                      ],
                    )))));
  }
}

>Solution :

You can wrap your From with LayoutBuilder to get it’s parent’s constraints and assign constraints.maxwidth to Snackbar width property like so:

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

Take in mind that constraints will also take padding into calculation, so if your Container has width: 800 and padding: EdgeInsets.all(10.0), constraints will give you maxwidth of 780 when it subtracts both left and right padding from parent’s maximum width.