flutter: Помещение FlatButton с Column в качестве дочернего элемента в макет разрывов AppBar

Question

У меня есть следующий код для создания BottomAppBar в моем приложении, который отлично работает.

class MyBottomAppBar extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final List<Widget> rowContents = <Widget> [
      new FlatButton(
          onPressed: () {

          },
          padding: EdgeInsets.all(10.0),
          child: new Row(
            children: <Widget>[
              new Icon(Icons.menu),
              new Text("Feed")
            ],
          ),
      ),
      const Expanded(child: const SizedBox()),
      new FlatButton(
        onPressed: () {

        },
        padding: EdgeInsets.all(10.0),
        child: new Row(
          children: <Widget>[
            new Icon(Icons.people),
            new Text("Profile")
          ],
        ),
      ),
    ];



    return new BottomAppBar(
      hasNotch: true,
      child: new Row(children: rowContents),
    );
  }
}

Я хочу использовать Column() как потомок FlatButton(), так что Text() отображается под Icon(), а не рядом с ним.

Когда я изменяю Row() на Column(), я получаюследующий результат:

Что я здесь не так делаю?

Answer 1

По умолчанию виджет Column заполняет все возможное пространство.Вы можете передать ему mainAxisSize из mainAxisSize.min, чтобы заставить виджет занимать как можно меньше места.

Это исправленная версия вашего кода, которая работает так, как вы хотите:

class MyBottomAppBar extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final List<Widget> rowContents = <Widget> [
      new FlatButton(
        onPressed: () {

        },
        padding: EdgeInsets.all(10.0),
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new Icon(Icons.menu),
            new Text("Feed")
          ],
        ),
      ),
      const Expanded(child: const SizedBox()),
      new FlatButton(
        onPressed: () {

        },
        padding: EdgeInsets.all(10.0),
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new Icon(Icons.people),
            new Text("Profile")
          ],
        ),
      ),
    ];



    return new BottomAppBar(
      hasNotch: true,
      child: new Row(children: rowContents),
    );
  }
}