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

flutter dart

Solution 1:^[1]

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.

Solution 2:^[2]

Try below code hope its help to you, just set width of SnackBar

Your Snackbar method:

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

Your Widget:

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

Your Result->

Solution 3:^[3]

instead of using SnackBar on web or windows use bot_toast

this is the link ,please go through this link

https://pub.dev/packages/bot_toast

it soo much better than SnackBar

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Ravindra S. Patil
Solution 3	Jinto Joseph

'Set width SnackBar

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]