BottomNavigationBar title not showing in Flutter

Question

Why the bottom navigation bar title not showing ? It suppose to show below the icon

class FlutterProject extends StatefulWidget {
  final String title = "Flutter Bottom Tab demo";

  @override
  GoalsListState createState() {
    return GoalsListState();
  }
}

class GoalsListState extends State<FlutterProject>
    with SingleTickerProviderStateMixin {
  int _cIndex = 0;

  void _incrementTab(index) {
    setState(() {
      _cIndex = index;
    });
  }

  final List<Widget> _children = [
    new One(),
    new Two(),
    new Three(),
    new Four(),
    new More()
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: _children[_cIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _cIndex,
          type: BottomNavigationBarType.shifting,
          items: [
            BottomNavigationBarItem(
                icon:
                    Icon(Icons.graphic_eq, color: Color.fromARGB(255, 0, 0, 0)),
                title: new Text('One')),
            BottomNavigationBarItem(
                icon: Icon(Icons.report_problem,
                    color: Color.fromARGB(255, 0, 0, 0)),
                title: new Text('Two')),
            BottomNavigationBarItem(
                icon: Icon(Icons.work, color: Color.fromARGB(255, 0, 0, 0)),
                title: new Text('Three')),
            BottomNavigationBarItem(
                icon: Icon(Icons.domain, color: Color.fromARGB(255, 0, 0, 0)),
                title: new Text('Four')),
            BottomNavigationBarItem(
                icon: Icon(Icons.menu, color: Color.fromARGB(255, 0, 0, 0)),
                title: new Text('Five')),
          ],
          onTap: (index) {
            _incrementTab(index);
          },
        ));
  }
}

What did I miss here?

Akshay I · Answer 1 · 2020-05-05T05:58:02.407

When more than 3 BottomNavigationBar items are provided the type if unspecified, changes to BottomNavigationBarType.shifting per https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html. This bit of information should be highlighted in the class's doc. It's easy to overlook where it is (I overlooked it).

Add type: BottomNavigationBarType.fixed on BottomNavigationBar

BottomNavigationBar(
   type: BottomNavigationBarType.fixed,
   items: <BottomNavigationBarItem>[],
)

score 5 · Answer 2 · answered Jan 01 '21 at 21:48

U should use this code :

bottomNavigationBar: BottomNavigationBar(
//use both properties
   type: BottomNavigationBarType.fixed,
   showUnselectedLabels: true,
//-----------
    items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.icon1),
      label:'item 1',
   ),
   BottomNavigationBarItem(
     icon: Icon(Icons.icon2),
     label: 'item 2',
   ),
 ],
)

score 4 · Accepted Answer · answered Aug 14 '19 at 10:57

4

The Title is indeed displayed but is in white color if you look closely. Just add a color to the text to display it properly.

title: new Text('One', style: TextStyle(color: Colors.black))

answered Aug 14 '19 at 10:57

Darshan

10,550
5
49
61

thanks,how can I let the text appear without clicking ? – Tony Aug 14 '19 at 14:17
3

You have `type: BottomNavigationBarType.shifting,`. If you change it to `fixed`, you'll have text appear by default. – Darshan Aug 14 '19 at 14:50
@Darshan How can i get selected title of bottom navigation bar ?? – niceumang Jan 15 '20 at 12:27

score 1 · Answer 4 · answered Apr 15 '21 at 07:59

Here is easy hack to show the label of the Navigation bar item

 BottomNavigationBarItem(
            icon: Column(
              children: [
                new Icon(widget.currentTab == 2 ? Icons.dashboard_outlined : Icons.dashboard_outlined),
                Text("Homes")
              ],
            ),
            label: 'Home',

          ),

BottomNavigationBar title not showing in Flutter

4 Answers4