Я настраиваю 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)),
)
],
)))));
}
}
вместо использования SnackBar в Интернете или Windows используйте bot_toast
это ссылка, пожалуйста, перейдите по этой ссылке
https://pub.dev/packages/bot_toast
это намного лучше, чем SnackBar
Вы можете обернуть свой 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)
, ограничения дадут вам maxwidth
из 780
, когда он вычитает и left
, и right
padding
из максимума родителя width
.
Попробуйте приведенный ниже код, надеюсь, он вам поможет, просто установите width
из 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',
),
),