BottomNavigationBar without Text

Question

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

I did a BottomNavigationBar but it looks like this.

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,
  ),

Keeton

Answer 1

Set showSelectedLabels and showUnselectedLabels to `false:

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

Monacid

Answer 2

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: () {},),
      ],
    ),
  ),

Ballistic

Answer 3

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,
        ),

Ineffaceable

This will give the output what you shared in the question as expectation. If it is not able to give you the desired output, kindly post what exactly you want, so that I can help you. – Ineffaceable

This will give the output what you shared in the question as expectation. If it is not able to give you the desired output, kindly post what exactly you want, so that I can help you. – Ineffaceable

I just want an icon as bottom navigation bar item. I want no text. By the way, my English isn't good so I was hard to explain myself. – Keeton

Answer 4

A possible workaround is title: SizedBox.shrink()

Buttress

This can be a comment and not an answer. Please, read the rules of this community. – Hildy

Answer 5

Try removing title: attribute from BottomNavigationBarItem

Woolgrower

cause i tried the same code and it worked , you can also try Text('') empty text field, maybe u have already tried this. – Woolgrower

It looks like empty but there is a little space below. – Keeton

Use title: Container() – Woolgrower

Answer 6

Try with a below code snippet

bottomNavigationBar: BottomNavigationBar(
showSelectedLabels: false,   // <-- CHANGE HERE AS NEEDED
showUnselectedLabels: false, // <-- CHANGE HERE AS NEEDED
items: [
BottomNavigationBarItem(
  icon: Icon(Icons.person),
  title: Text('Personal')
),
BottomNavigationBarItem(
  icon: Icon(Icons.notifications),
  title: Text('Notifications'),
),
]
...
)

Yellowtail