Заголовок BottomNavigationBar не отображается во флаттере

Question

Почему заголовок нижней панели навигации не отображается? Предположим, чтобы показать под значком

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

Что я здесь пропустил?

Answer 1

Название действительно отображается, но находится в white цвет, если вы посмотрите внимательно. Просто добавьте color к тексту, чтобы отобразить его правильно.

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

https://i.st ack.imgur.com/2OLib.png

Answer 2

Если предоставляется более 3 элементов BottomNavigationBar, тип, если он не указан, изменяется на BottomNavigationBarType.shifting согласно https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html. Этот бит информации должен быть выделен в документе класса. Легко не заметить, где это (я это не заметил).

Тип добавления: BottomNavigationBarType. Исправлено на BottomNavigationBar

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

Answer 3

Длина элементов должна быть не менее двух, а значок и заголовок каждого элемента не должны быть пустыми.

Если тип равен нулю, тогда BottomNavigationBarType.fixed используется, когда есть два или три элемента, BottomNavigationBarType.shifting иначе.

Если вы хотите, чтобы заголовок отображался каждый раз, добавьте тип: BottomNavigationBarType.fixed, сделай это

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

И если вы хотите, чтобы заголовок был только на вкладке "Выбранное", добавьте в showSelectedLabels: true, а также showUnselectedLabels: false, нравится,

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

Answer 4

Вы должны использовать этот код:

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

Answer 5

Вот простой способ показать ярлык элемента панели навигации

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

          ),