Flutter: постоянные кнопки с виджетами одинакового динамического размера

#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. Спасибо за ваш ответ, вы можете посмотреть правку, которую я сделал?