I'm trying to change the colour of the item selected in the bottom menu bar according to the theme chosen (dark/light). For example, I want to have the icon selected in 'black' when the chosen theme is 'Light', and in the other way around, having the icon selected in 'white' when the chosen theme is 'Dark'.
From BottomNavigationBar(), I'm trying this conditional formatting below, but this is not working properly (it shows on 'black' colour whatever the chosen theme).
selectedItemColor: Get.isDarkMode ? Colors.white : Colors.black,
Does someone has an idea how to fix it?
home_screen.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
colors: [
Theme.of(context).colorScheme.primary,
Theme.of(context).colorScheme.secondary,
],
),
),
child: const Scaffold(
appBar: _CustomAppBar(),
bottomNavigationBar: _NavBar(),
),
);
}
}
class _CustomAppBar extends StatelessWidget with PreferredSizeWidget{
const _CustomAppBar({
super.key,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: AppBar(
title: Text(
'TravelApp',
style: Theme.of(context).textTheme.titleLarge!.copyWith(
fontWeight: FontWeight.bold
),
),
centerTitle: true,
elevation: 0,
actions: [
IconButton(
onPressed: () {
Get.changeThemeMode(
Get.isDarkMode ? ThemeMode.light : ThemeMode.dark,
);
print(Get.isDarkMode);
},
icon: Icon(
Get.isDarkMode ? Icons.dark_mode : Icons.light_mode,
)
)
]
),
);
}
@override
Size get preferredSize => const Size.fromHeight(56.0);
}
class _NavBar extends StatelessWidget {
const _NavBar({super.key});
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
showUnselectedLabels: false,
selectedItemColor: Get.isDarkMode ? Colors.white : Colors.black,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.local_activity),
label: 'Activity'
),
BottomNavigationBarItem(
icon: Icon(Icons.hotel),
label: 'Hotels'
),
BottomNavigationBarItem(
icon: Icon(Icons.flight_takeoff),
label: 'Flights'
),
BottomNavigationBarItem(
icon: Icon(Icons.restaurant),
label: 'Restaurants'
),
]
);
}
}
main.dart
import 'package:flutter/material.dart';
import 'package:get/get_navigation/src/root/get_material_app.dart';
import 'package:get/get_navigation/src/routes/get_route.dart';
import 'package:travel_app/screens/activity_screen.dart';
import 'package:travel_app/screens/home_screen.dart';
import 'config/theme.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner : false,
title: 'Flutter Travel App UI',
theme: lightTheme(),
darkTheme: darkTheme(),
home: const HomeScreen(),
// getPages: [
// GetPage(name: '/', page: () => const ActivityScreen()),
// ]
);
}
}
theme.dart
import 'package:flutter/material.dart';
import 'package:get/get_navigation/src/root/get_material_app.dart';
import 'package:get/get_navigation/src/routes/get_route.dart';
import 'package:travel_app/screens/activity_screen.dart';
import 'package:travel_app/screens/home_screen.dart';
import 'config/theme.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner : false,
title: 'Flutter Travel App UI',
theme: lightTheme(),
darkTheme: darkTheme(),
home: const HomeScreen(),
// getPages: [
// GetPage(name: '/', page: () => const ActivityScreen()),
// ]
);
}
}
activity_screen
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import '../models/activity_models.dart';
import '../widgets/custom_header.dart';
class ActivityScreen extends StatelessWidget {
const ActivityScreen({super.key});
static const routeName = '/activities';
@override
Widget build(BuildContext context) {
List<Activity> activities = Activity.activities;
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const CustomHeader(title: 'Activities'),
MasonryGridView.count(
shrinkWrap: true, // to avoid the error
physics: const NeverScrollableScrollPhysics(),
padding: const EdgeInsets.all(10.0),
itemCount: 9,
crossAxisCount: 2,
mainAxisSpacing: 15,
crossAxisSpacing: 10,
itemBuilder: (context, index) {
Activity activity = activities[index];
return Column(
children: [
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
image: DecorationImage(
image: AssetImage(activity.url),
fit: BoxFit.cover,
),
),
),
const SizedBox(height: 5.0),
Text(
activity.title,
maxLines: 3,
style: Theme.of(context).textTheme.bodySmall!.copyWith(
color: Get.isDarkMode ? Colors.white : Colors.black,
fontWeight: FontWeight.bold,
)
)
],
);
}
),
]
)
);
}
}
Thank you for your help! :)
