I have created a toggle switch in the appBar but its not visible because of the code.
It changes themes between light to dark when clicked
main.dart
class MyApp extends StatelessWidget {
static const String title = "User Profile";
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final user = UserPreferences.getUser();
return ThemeProvider(
initTheme: user.isDarkMode ? Mythemes.darkTheme : Mythemes.lightTheme,
child: Builder(
builder: (context) =>
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeModelInheritedNotifier.of(context).theme,
title: title,
home: const ProfilePage(),
),
),
);
}
}
What do I need to change and what not to get the toggle switch visible?
themes.dart
class Mythemes {
static const primary = Colors.blue;
static final primaryColor = Colors.blue.shade300;
static final darkTheme = ThemeData(
scaffoldBackgroundColor: Colors.grey.shade900,
primaryColorDark: primaryColor,
dividerColor: Colors.white,
colorScheme: const ColorScheme.dark(primary: primary).copyWith(secondary: Colors.blue),
);
static final lightTheme = ThemeData(
scaffoldBackgroundColor: Colors.white,
primaryColor: primaryColor,
colorScheme: const ColorScheme.light(primary: primary),
dividerColor: Colors.black,
);
}
Appbar widget code
AppBar buildAppBar(BuildContext context) {
final user = UserPreferences.getUser();
final isDarkMode = user.isDarkMode;
final icon = isDarkMode ? CupertinoIcons.sun_max : CupertinoIcons.moon_stars;
return AppBar(
leading: const BackButton(
color: Colors.blue,
),
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
elevation: 0,
actions: [
ThemeSwitcher(
builder: (context) => IconButton(
color: Colors.blue,
icon: Icon(icon),
onPressed: () {
final theme = isDarkMode ? Mythemes.lightTheme : Mythemes.darkTheme;
final switcher = ThemeSwitcher.of(context);
switcher.changeTheme(theme: theme);
final newUser = user.copy(isDarkMode : !isDarkMode);
UserPreferences.setUser(newUser);
},
),
),
],
);
}
how to solve this error