Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

BottomNavigationBar without Text

Tags:

flutter

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,
  ),
like image 687
Mehmet Avatar asked Dec 27 '18 08:12

Mehmet


2 Answers

Set showSelectedLabels and showUnselectedLabels to `false:

      bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        type: BottomNavigationBarType.fixed,
        items: // ...
        showSelectedLabels: false,
        showUnselectedLabels: false,
      ),
like image 54
ohho Avatar answered Oct 09 '22 08:10

ohho


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: () {},),
      ],
    ),
  ),
like image 28
Epizon Avatar answered Oct 09 '22 08:10

Epizon