flutterdartnavigationbar

Flutter BottomNavigationBar show 1 label only


I have implemented a navigation bar, but the labels aren't shown for the other labels which aren't clicked.I want to show all the labels for BottomNavigationBar either they are clicked or not.

Screenshot:

Here is my Code:

home.dart:

import 'package:myProject/MyBottomNavigationBar.dart';
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  final int test = 5;

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
        bottomNavigationBar: MyBottomNavigationBar()
        );
  }
}

my BottomNavigationBar:

import 'package:flutter/material.dart';

class MyBottomNavigationBar extends StatelessWidget {
  const MyBottomNavigationBar({super.key});

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: 0,
      
      fixedColor: Colors.white,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home, color: Colors.white),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.devices, color: Colors.white),
          label: 'Devices',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.notifications, color: Colors.white),
          label: 'Notifications',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings, color: Colors.white),
          label: 'Settings',
        ),
      ],
      //currentIndex: 1,
      //onTap: _onItemTapped,
    );
  }
}

Solution

  • If you want other labels to be shown like first one use

    type: BottomNavigationBarType.fixed

    on your BottomNavigationBar

    Full Example:

    BottomNavigationBar(
          currentIndex: 0,
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.white,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home, color: Colors.white),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.devices, color: Colors.white),
              label: 'Devices',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.notifications, color: Colors.white),
              label: 'Notifications',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings, color: Colors.white),
              label: 'Settings',
            ),
          ],
          //currentIndex: 1,
          //onTap: _onItemTapped,
        )