How to add Floating action Button in Bottom Navigation Bar in Center with border?

Question

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.

Here is a picture of the issue. Achieved Image

Here is a picture what I want Required Image

Code

    bottomNavigationBar: SafeArea(child: _buildBottomBar(context)),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: CircularGradientButton(
          tooltip: 'Increment',
          child: new Image.asset(UIData.cameraIcon),
          gradient: LinearGradient(colors: <Color>[
            Color.fromARGB(255, 17, 153, 142),
            Color.fromARGB(255, 56, 239, 125)
          ]),
          callback: () => 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: <Tab>[
          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,
      ),
    );
  }

score 13 · Accepted Answer · answered Sep 13 '19 at 06:17

There are many possible solutions, one of them is to add padding and border.

import 'package:charts_flutter/flutter.dart' as prefix0;
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blueAccent,
        floatingActionButton: Padding(
          padding: EdgeInsets.only(top: 20),
          child: SizedBox(
            height: 70,
            width: 70,
            child: FloatingActionButton(
              backgroundColor: Colors.transparent,
              elevation: 0,
              onPressed: () {},
              child: Container(
                height: 70,
                width: 70,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white, width: 4),
                  shape: BoxShape.circle,
                  gradient: LinearGradient(
                    begin: const Alignment(0.7, -0.5),
                    end: const Alignment(0.6, 0.5),
                    colors: [
                      Color(0xFF53a78c),
                      Color(0xFF70d88b),
                    ],
                  ),
                ),
                child: Icon(Icons.photo_camera, size: 30),
              ),
            ),
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: BottomAppBar(
          color: Colors.white,
          child: Container(
            height: 80,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

Happy to help, pls upvote the answer if it's helped you. The stackoverflow rating system doesn't count approved answer in specific tag rating, only votes. — Kherel, Sep 13 '19 at 07:06
Hi @Kherel, is there a way to remove the border outline in the camera button in the above example. there is about 1px border outline in the bottom of that button if you look it closely. Any way to remove that? — SVG, Jul 28 '22 at 05:06

score 2 · Answer 2 · answered Oct 22 '20 at 20:50

2

Here is a crystal clear official demonstration : https://youtu.be/2uaoEDOgk_I

Code will be something like this:

Scaffold(..
  floatingActionButton..
  bottomNavigationBar..
    floatingActionButtonLocation: FloatingActionButtonLocation.endDocked

answered Oct 22 '20 at 20:50

shaheer shukur

1,077
2
12
19

genericUser · Answer 3 · 2021-02-20T13:17:29.627

Another option is to use notchMargin in your BottomAppBar to get the opposite to your answer. It looks amazing so I decided to add that option too.

https://medium.com/codechai/flutter-hasnotch-property-disappeared-from-bottomappbar-solved-986552fa03a

return Scaffold(
  appBar: AppBar(
    title: Text('Flutter notch demo'),
  ),
  bottomNavigationBar: BottomAppBar(
    notchMargin: 2.0,
    shape: CircularNotchedRectangle(),
  ),
  floatingActionButtonLocation:
  FloatingActionButtonLocation.endDocked,
  floatingActionButton: FloatingActionButton(
  onPressed: () => Navigator.of(context).pop(),
  child: Icon(Icons.done_all),
  ),
);

How to add Floating action Button in Bottom Navigation Bar in Center with border?

3 Answers3

Linked