导航栏中的居中浮动操作按钮 Flutter

Question

I have created a navigation bar in flutter, now I want to add a button in between the navbar icons as shown in this image. I want this

But I am getting this. I am getting this

I brought the button in the middle with following code:

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: const Icon(PhosphorIcons.plusLight,color: navBarColor),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Is there any way to bring it in the middle of the navbar?

If there is a there is a way to give circle background color to a navbar destination, then it would be better.

Answer 1

Try adding an alignment to the fab

floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          floatingActionButton: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              padding: const EdgeInsets.only(bottom: 6.0),
              
              child:  FloatingActionButton(
                onPressed: () {},
               
                child: Icon(Icons.add),
              ),
            ),
          ),

Answer 2

floatingActionButton: Stack( [ Position( bottom: -20, FloatingActionButton( onPressed: () {}, child: const Icon(PhosphorIcons.plusLight,color: navBarColor), ) ) ]), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Answer 3

Do not use a FloatingActionButton with a navbar like that. Just add the + action as another button in the middle of the navbar.