Flutter：persistentFooterButtons具有相同的动态大小小部件

Question

我想用3 FlatButton.icon创建一个persistentFooterButtons 为了完全占据屏幕的整个宽度，并使用不同的屏幕尺寸自定义自身，我尝试了很多方法，例如环绕，扩展，我无法使其正常工作，甚至尝试过

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属性没有做任何更改，因此三个按钮并排放置 See here

有帮助吗？

Answer 1

要创建persistentFooterButton，您需要使用bottomNavigationBar。 而要创建3个大小相等的flatButton，则需要在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"),
          ),
        ),
      ],
    ),
  ),
);