title: How to perfectly align bottom navigation item with docked fab?
body: <p>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</p>
  
  <p>Current ui:</p>
  
  <p><a href="https://i.stack.imgur.com/8VR77.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8VR77.png" alt="enter image description here"></a></p>
  
  <p>The code:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  class Dashboard extends StatefulWidget {
    _DashboardState createState() =&gt; _DashboardState();
  }
  
  class _DashboardState extends State&lt;Dashboard&gt; {
    int _selectedPage = 0;
    final _pageOptions = [
      Home(),
      Discover(),
      Notifications(),
      Messages(),
    ];
  
    Widget build(BuildContext context) {
      final _drawerNav = Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: &lt;Widget&gt;[
            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,
      );
    }
  }
  </code></pre>