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

Answer 1

Set showSelectedLabels and showUnselectedLabels to `false:

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

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