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?

Answer 1

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

Answer 2

The length of items must be at least two and each item's icon and title must not be null.

If type is null then BottomNavigationBarType.fixed is used when there are two or three items, BottomNavigationBarType.shifting otherwise.

If you want to show the title every time, then add type: BottomNavigationBarType.fixed, do this

 bottomNavigationBar: BottomNavigationBar(
   type: BottomNavigationBarType.fixed,
   currentIndex: _page,
   items: tabsList,
 )

And if you want the title only on the Selected tab then add to showSelectedLabels: true, and showUnselectedLabels: false, like this,

 bottomNavigationBar: BottomNavigationBar(
   type: BottomNavigationBarType.fixed,
   showSelectedLabels: true,
   showUnselectedLabels: false,
   currentIndex: _page,
   items: tabsList,
 )