#flutter
#flutter
Вопрос:
Я хочу создать persistentFooterButtons с 3 плоскими кнопками.чтобы значок одинаково занимал всю ширину экрана и настраивался под разные размеры экрана, я перепробовал много подходов, таких как Wrap, Expanded, я не смог заставить его работать, я даже пытался
final screenSize = MediaQuery.of(context).size;
Container(
width: screenSize.width /3 ,
child: FlatButton.icon(
onPressed: null,
icon: Icon(Icons.search),
label: Text("search")),
),
но текст всегда переливается на правую сторону экрана. Итак, есть идеи, как это могло бы пойти?
** Редактировать**
я нашел этот подход, который очень полезен
persistentFooterButtons: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton(
onPressed: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(Icons.lightbulb_outline),
new Text('Idea'),
],
),
),
FlatButton(
onPressed: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(Icons.lightbulb_outline),
new Text('Idea'),
],
),
),
FlatButton(
onPressed: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(Icons.lightbulb_outline),
new Text('Idea'),
],
),
),
],
),
],
Единственная проблема заключается в том, что mainAxisAlignment
свойство не вносит никаких изменений, поэтому три кнопки расположены бок о бок
Смотрите здесь
Любая помощь?
Ответ №1:
Для создания persistentFooterButtons вам нужно использовать bottomNavigationBar
. И для создания 3 плоских кнопок одинакового размера вам нужно использовать flex
атрибут внутри Expanded
виджета.
Scaffold(
body: Container(
color: Colors.white,
child: Center(child: Text("Flutter"),),
),
bottomNavigationBar: new Container(
padding: EdgeInsets.all(0.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child: FlatButton.icon(
onPressed: () {
},
icon: Icon(Icons.search),
label: Text("Search"),
),
),
Expanded(
flex: 1,
child: FlatButton.icon(
onPressed: () {
},
icon: Icon(Icons.search),
label: Text("Search"),
),
),
Expanded(
flex: 1,
child: FlatButton.icon(
onPressed: () {
},
icon: Icon(Icons.search),
label: Text("Search"),
),
),
],
),
),
);
Комментарии:
1. Спасибо за ваш ответ, вы можете посмотреть правку, которую я сделал?