У меня есть следующий код для создания 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),
    );
  }
}

enter image description here

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

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

enter image description here

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

2
ad_on_is 29 Май 2018 в 23:32

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),
    );
  }
}
3
Mans 29 Май 2018 в 20:45