Flutter 调整 float 操作按钮的底部选项卡间距

Question

我正在尝试调整选项卡的间距，以便它在停靠在底部中心的 float 操作按钮附近看起来不会很尴尬。我正在考虑添加一个“隐形”图标，但这意味着用户可能会错误地点击该图标，我认为这不是最好的解决方法。

我的小部件:

Widget build(context) {
  return new Scaffold(
    body: TabBarView(
      children: _displayTabPages(),
    ),
    bottomNavigationBar: BottomAppBar(
      child: _createTabBar(),
      color: Colors.blue,
      shape: CircularNotchedRectangle(),
      notchMargin: 5.0,
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      tooltip: 'Add Transaction',
      backgroundColor: Colors.orange[300],
      foregroundColor: Colors.black87,
      child: Icon(FontAwesomeIcons.plus),
      elevation: 2.0,
    ),
  );
}

我的标签栏:

Widget _createTabBar() {
  return TabBar(
    tabs: [
      Tab(
        icon: new Icon(FontAwesomeIcons.list),
      ),
      Tab(
        icon: new Icon(FontAwesomeIcons.calendarAlt),
      ),
      Tab(
        icon: new Icon(FontAwesomeIcons.chartPie),
      ),
      Tab(
        icon: new Icon(FontAwesomeIcons.cog),
      )
    ],
    labelColor: Colors.white,
    unselectedLabelColor: Colors.black87,
    indicatorColor: Colors.blue,
  );
}

上面创建了这个:

有没有办法修复中间图标之间的间距？

Answer 1

您可以通过添加 centerItemText 来引用下面的两个链接来解决您的问题。您也可以使用空白区域代替文本。

https://medium.com/coding-with-flutter/flutter-bottomappbar-navigation-with-fab-8b962bb55013

https://github.com/bizz84/bottom_bar_fab_flutter/blob/master/lib/fab_bottom_app_bar.dart