How to perfectly align bottom navigation item with docked fab?

Question

I am new in flutter. I am trying to create a main screen where there is bottom bar with floating action button(FAB). The fab is docked at the center of bottom app bar. Meanwhile, the bottom app bar has 4 bottom navigation items. Currently all the items are not perfectly aligned with each other. The search and notification icons are too close to the center. Is there a way i can arrange it to make it better and perfectly aligned? Please help. Thank you

Current ui:

The code:

import 'package:flutter/material.dart';

class Dashboard extends StatefulWidget {
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  int _selectedPage = 0;
  final _pageOptions = [
    Home(),
    Discover(),
    Notifications(),
    Messages(),
  ];

  Widget build(BuildContext context) {
    final _drawerNav = Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: Text('Drawer Header'),
            decoration: BoxDecoration(color: colorPrimary),
          ),
          ListTile(
            title: Text('Item 1'),
            onTap: () {},
          ),
          Divider(),
          ListTile(
            title: Text('Item 2'),
            onTap: () {},
          ),
          Divider(),
        ],
      ),
    );

    final _bottomNav = BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 6,
      clipBehavior: Clip.antiAlias,
      child: BottomNavigationBar(
        selectedItemColor: colorPrimary,
        unselectedItemColor: Colors.grey,
        currentIndex: _selectedPage,
        onTap: (int index) {
          setState(() {
            _selectedPage = index;
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Container(height: 8.0)),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Container(height: 8.0)),
          BottomNavigationBarItem(
              icon: Icon(Icons.notifications), title: Container(height: 8.0)),
          BottomNavigationBarItem(
              icon: Icon(Icons.message), title: Container(height: 8.0)),
        ],
      ),
    );

    final _fab = FloatingActionButton(
      child: Icon(Icons.add),
      backgroundColor: colorPrimary,
      onPressed: () {},
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
        backgroundColor: colorPrimary,
      ),
      drawer: _drawerNav,
      body: _pageOptions[_selectedPage],
      floatingActionButton: _fab,
      bottomNavigationBar: _bottomNav,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

Answer 1

I made a quick and dirty fix

I made the bottom navigation bar using row. Instead of using 4 children, I use 5. One of them is a dummy child

https://gist.github.com/hariangr/2739c25dda72edcbc18073b907ef057a

Answer 2

Try setting type in BottomNavigationBar to BottomNavigationBarType.fixed

The bottom navigation bar's type changes how its items are displayed. If not specified, then it's automatically set to BottomNavigationBarType.fixed when there are less than four items, and BottomNavigationBarType.shifting otherwise.

BottomNavigationBarType.fixed, the default when there are less than four items. The selected item is rendered with the selectedItemColor if it's non-null, otherwise the theme's ThemeData.primaryColor is used. If backgroundColor is null, The navigation bar's background color defaults to the Material background color, ThemeData.canvasColor (essentially opaque white).

BottomNavigationBarType.shifting, the default when there are four or more items. If selectedItemColor is null, all items are rendered in white. The navigation bar's background color is the same as the BottomNavigationBarItem.backgroundColor of the selected item. In this case it's assumed that each item will have a different background color and that background color will contrast well with white.