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