Flutter：带有 endDocked FAB 的 BottomAppBar 图标不能很好地对齐。答案

【问题标题】：Flutter: BottomAppBar icons with endDocked FAB don't align nicely.Flutter：带有 endDocked FAB 的 BottomAppBar 图标不能很好地对齐。
【发布时间】：2018-10-10 20:24:09
【问题描述】：

我已经被这个问题困扰了一段时间，并且无法通过谷歌搜索找到任何答案。我有一个带有 endDocked Fab 的 bottomAppBar，带有 3 个间隔开的图标。然而，这些图标并没有考虑到 FAB 就在它的正上方，这导致间距不太令人赏心悦目。

https://imgur.com/a/uR1zXbX

第一张照片显示当前正在发生的事情，第二张更接近我所追求的，减去隐藏在 FAB 后面的白色图标。

有没有办法告诉flutter说图标的可用空间不应该与endDocked FAB重叠？

谢谢！

代码：

    floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
    floatingActionButton: FloatingActionButton(
      backgroundColor: Color(0xFF14172D),
      child: const Icon(Icons.menu),
      onPressed: () {},
    ),
    bottomNavigationBar: BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 4.0,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.all_inclusive),
            color: Color(0xFF14172D),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.account_circle),
            color: Color(0xFF14172D),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.notifications),
            color: Color(0xFF14172D),
            onPressed: () {},
          ),
        ],
      ),
    ),

【问题讨论】：

标签： dart flutter

【解决方案1】：

您可以使用非可视小部件增加BottomAppBar。在 Flutter 中使用 SizedBox 填充是很常见的，所以你可以做到这一点：

bottomNavigationBar: BottomAppBar(
  ...
  child: new Row(
    ...
    children: <Widget>[
      ...
     ,
    ],
  ),const SizedBox(width: 20.0)
...

【讨论】：

您可以使用SizedBox，但真正“正确”的方法是添加另一个IconButton，icon 是Icon(null)。这会自动调整大小。