How do I change the label colour of a navbar element when selected?

Akhil Swarop S - Jun 6 - - Dev Community

`import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'home_screen.dart';
import 'settings.dart';
import 'order_history_screen.dart';
import 'profile_screen.dart';

class BottomNavigationBarWidget extends StatefulWidget {
const BottomNavigationBarWidget({Key? key}) : super(key: key);

@override
State createState() =>
_BottomNavigationBarWidgetState();
}

class _BottomNavigationBarWidgetState extends State {
late NavigationController controller;

@override
void initState() {
super.initState();
controller = Get.put(NavigationController());
}

@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Obx(
() => NavigationBar(
labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
indicatorColor:const Color(0xFF24293E),
height: 80,
elevation: 0,
selectedIndex: controller.selectedIndex.value,
onDestinationSelected: (index) {
controller.selectedIndex.value = index;
},
backgroundColor: const Color.fromARGB(255, 18, 22, 38),
destinations: const [
NavigationDestination(
label: 'Home',
icon: Icon(Icons.home_rounded, size: 28),
selectedIcon:
Icon(Icons.home_rounded, color: Color(0xFF8EBBFF), size: 28),
),
NavigationDestination(
label: 'Orders',
icon: Icon(Icons.shopping_cart_rounded, size: 28),
selectedIcon: Icon(Icons.shopping_cart_rounded,
color: Color(0xFF8EBBFF), size: 28),
),
NavigationDestination(
label: 'Profile',
icon: Icon(Icons.person, size: 28),
selectedIcon:
Icon(Icons.person, color: Color(0xFF8EBBFF), size: 28),
),
NavigationDestination(
label: 'Settings',
icon: Icon(Icons.settings, size: 28),
selectedIcon:
Icon(Icons.settings, color: Color(0xFF8EBBFF), size: 28),
),
],
),
),
body: Obx(
() {
return IndexedStack(
index: controller.selectedIndex.value,
children: controller.screens,
);
},
),
);
}
}

class NavigationController extends GetxController {
final Rx selectedIndex = 0.obs;
final List screens = [
const HomeScreen(userName: 'Akhil'),
const OrderHistoryScreen(),
const ProfileScreen(),
const SettingScreen(),
];
}
`

.