Flutter Adjust bottom tab spacing for floating action button

Question

I'm trying to adjust the spacing of my tabs so that it doesn't look awkward near the floating action button that I have docked at the bottom center. I was thinking of adding an 'invisible' icon but then that would mean the user might tap that by mistake and I don't think that's the best way around it.

My Widget:

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,
    ),
  );
}

My TabBar:

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,
  );
}

The above creates this:

Is there a way to fix the spacing in between the middle icons?

Answer 1

You can refer two links below for your problem by adding centerItemText. Also you can use empty space instead of text.

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