BottomNavigationBar without Text

user_9923274 0
Viewed 5006

Yes, my question is this. How can I do like this?

enter image description here

I did a BottomNavigationBar but it looks like this.

enter image description here

My codes are like this:

bottomNavigationBar: BottomNavigationBar(
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text("Home"),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.markunread),
        title: Text("Chat"),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.location_on),
        title: Text("Your Country"),
      ),
    ],
    fixedColor: Colors.blue,
    onTap: clickedBottomBtn,
  ),
flutter
5 Answers

Set showSelectedLabels and showUnselectedLabels to `false:

      bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        type: BottomNavigationBarType.fixed,
        items: // ...
        showSelectedLabels: false,
        showUnselectedLabels: false,
      ),
user_885970

I think this is the better way

bottomNavigationBar: BottomAppBar(
    child: new Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        IconButton(icon: Icon(Icons.menu), onPressed: () {},),
        IconButton(icon: Icon(Icons.search), onPressed: () {},),
        IconButton(icon: Icon(Icons.search), onPressed: () {},),
        IconButton(icon: Icon(Icons.search), onPressed: () {},),
      ],
    ),
  ),
user_66897480

According to the documentation of BottomNavigationBar you cannot make the title of BottomNavigationBarItem null.

So here is the workaround.

bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: Icon(Icons.home),
              ),
              title: Container(),
            ),
            BottomNavigationBarItem(
              icon: Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: Icon(Icons.markunread),
              ),
              title: Container(),
            ),
            BottomNavigationBarItem(
              icon: Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: Icon(Icons.location_on),
              ),
              title: Container(),
            ),
          ],
          fixedColor: Colors.blue,
        ),
user_8013690

A possible workaround is title: SizedBox.shrink()

user_40398700

Try removing title: attribute from BottomNavigationBarItem

user_101042090
Related