Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - How to hide/remove title of BottomNavigationBarItem

Tags:

flutter

dart

so i have this flutter app, and i'm trying to hide or remove the title. I tried leaving the title as an empty string i.e. new Text("") but that messed with the alignment of the navbar.

Desired Outcome:

Hers's what i want to acheive

What i'm getting (if i leave the title as empty string):

enter image description here:

like image 377
Kingsley CA Avatar asked Sep 05 '18 10:09

Kingsley CA


People also ask

How do you remove a label from BottomNavigationBarItem flutter?

Solution: In the BottomNavigationBar set the “selectedFontSize” to 0. Then set the BottomNavigationBarItem “label” property to empty string.

How do you customize the bottom navigation bar in flutter?

Now let's create our bottom navigation bar. In the HomePage class let's define the bottomNavigationBar attribute and assign a Container to it. Give it a height of 60 with some BoxDecoration (Pixels) add a Row as the child of the Container. Set the main axis alignment to space around.


1 Answers

There are two workarounds for this problem, as this feature is not yet implemented.

  1. Pass Container(height: 0.0) instead of Text("")
  2. Create widget and use it instead of Flutter's bottom navigation. Source.

Update:

Just add this to your BottomNavigationBar

showSelectedLabels: false, showUnselectedLabels: false, 
like image 105
Daniil Yakovlev Avatar answered Oct 08 '22 03:10

Daniil Yakovlev