title: How to add Floating action Button in Bottom Navigation Bar in Center with border?
body: <p>I am trying to add a Floating Action Button in the middle of the Bottom Navigation bar. Problem is border is not appearing and also margin in Floating Action Button and icons not according to my requirement.</p>
  <p>Here is a picture of the issue.
  <a href="https://i.stack.imgur.com/PCRqq.png" rel="nofollow noreferrer">Achieved Image </a></p>
  <p>Here is a picture what I want
  <a href="https://i.stack.imgur.com/ESNC9.png" rel="nofollow noreferrer">Required Image</a></p>
  <p>Code</p>
  <pre><code>    bottomNavigationBar: SafeArea(child: _buildBottomBar(context)),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
          floatingActionButton: CircularGradientButton(
            tooltip: 'Increment',
            child: new Image.asset(UIData.cameraIcon),
            gradient: LinearGradient(colors: &lt;Color&gt;[
              Color.fromARGB(255, 17, 153, 142),
              Color.fromARGB(255, 56, 239, 125)
            ]),
            callback: () =&gt; openCamera(),
            //_optionsDialogBox(),
            elevation: 2.0,
          ), 
  
  
  
      Widget _buildBottomBar(BuildContext context) {
      return Material(
        color: Colors.white,
        child: TabBar(
          isScrollable: false,
          unselectedLabelColor: Colors.white.withOpacity(0.3),
          indicatorColor: Colors.white,
          tabs: &lt;Tab&gt;[
            new Tab(
              // set icon to the tab
              icon: Image.asset(
                _tabController.index == 0 ? UIData.mapIconActive : UIData.mapIcon,
                width: 30,
                height: 30,
              ),
            ),
            new Tab(
              icon: Image.asset(
                _tabController.index == 1
                    ? UIData.listingIconActive
                    : UIData.listingIcon,
                width: 30,
                height: 30,
              ),
            ),
            new Tab(
              icon: Image.asset(
                _tabController.index == 2
                    ? UIData.messageIconActive
                    : UIData.messageIcon,
                width: 30,
                height: 30,
              ),
            ),
            new Tab(
              icon: Image.asset(
                _tabController.index == 3
                    ? UIData.settingsIconActive
                    : UIData.settingsIcon,
                width: 30,
                height: 30,
              ),
            ),
          ],
          controller: _tabController,
        ),
      );
    }
  </code></pre>