1

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:

enter image description here

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.blue,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.person, color: Colors.blue),
          label: 'Profile',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.favorite, color: Colors.blue),
          label: 'Likes',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.music_note, color: Colors.blue),
          label: 'Playlist',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings, color: Colors.blue),
          label: 'Settings',
        ),
      ],
      //currentIndex: 1,
      //onTap: _onItemTapped,
    );
  }
}
1
  • do you want other labels to show when not clicked? Commented Aug 26, 2024 at 4:20

1 Answer 1

2

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,
    )
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.