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