How to customise bottom navigation bar item instead of creating custom Bottom Navigation Bar

user_12089796 0
Viewed 198

I have the following below bottom navigation bar code:

bottomNavigationBar: BottomNavigationBar(
            currentIndex: cubit.currentIndex,
            onTap: (index) {
              cubit.changeBottomNavIndex(index);
            },
            items: [
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Home), label: 'Home'),
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Chat), label: 'Chat'),
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Paper_Upload,), label: 'Post'),
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Location), label: 'Location'),
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Setting), label: 'Settings'),
            ],
          ),

and this is the below image:

enter image description here

So I wonder that if there's a way to customise the middle bottom navigation bar item only, instead of creating a custom Navigation bottom bar as to be looks like a Floating action button...

or I shall create a new customised one?

I hope someone could help me :)...

dart flutter
2 Answers

I found a solution but I think it's not the best one:

just add a floating action button as the below code :

floatingActionButton: FloatingActionButton(
            onPressed: () { },
            tooltip: 'Post',
            child: Icon(IconBroken.Paper_Upload, color: Colors.white,),
            elevation: 2.0,
          ),

and added the below line in the Scaffold Part:

floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,

as it's shows as the below image:

enter image description here

but I see it's not looks good..

I hope someone gives me better answer :)

user_120897960

There are a lot of custom made widget our there regarding bottom navigation bar. You can use persistent_bottom_nav_bar that has a style that match yours demo

user_37337300
Related