Dark Theme Using GetX and Get_Storage
Hi , in this tutorial I will explain steps by step how to implement dark theme in your flutter app using GetX and Get_Storage so let’s get started >>
- first at all add this dependencies to pubspec.yaml file :
get: ^4.6.1
get_storage: ^2.0.3
- add app bar to your home page and inside the actions [] add iconButton to change the theme
- in this tutorial I used this Icon :
const moonIcon = CupertinoIcons.moon_stars;
- add it inside the build and use it after import the cupertino library
- create new file in lib folder called theme_service.dart
- then inside it create a new class and call it ThemeService
- create two finals for lightTheme and darkTheme like this :
///Themes
final lightTheme = ThemeData.light().copyWith(
primaryColor: Colors.blueGrey.shade300,
appBarTheme: const AppBarTheme(),
dividerColor: Colors.black12,
);
final darkTheme = ThemeData.dark().copyWith(
primaryColor: Colors.blue,
appBarTheme: const AppBarTheme(),
dividerColor: Colors.white54,
);
- now add to finals to use Get_Storage
final _getStorage = GetStorage();
final _darkThemeKey = ‘isDarkTheme’;
- add new function to save chosen theme locally and call it :
void saveThemeData(bool isDarkMode) {
_getStorage.write(_darkThemeKey, isDarkMode);
}
- add new function to get saved theme return boolean true or false using the final key _darkThemeKey
bool isSavedDarkMode() {
return _getStorage.read(_darkThemeKey) ?? false;
}
- add new function return Theme Mode to get the current Theme depending on the previous bool if was true it will return Dark Them otherwise will return Light Theme
ThemeMode getThemeMode() {
return isSavedDarkMode() ? ThemeMode.dark : ThemeMode.light;
}
- The last function in this class will call it changeTheme using GetX to change theme and save the new theme locally
void changeTheme() {
Get.changeThemeMode(isSavedDarkMode() ? ThemeMode.light : ThemeMode.dark);
saveThemeData(!isSavedDarkMode());
}
- in the main file inside the GetMaterialApp add this lines to use the themes from the themeService class:
theme: ThemeService().lightTheme,
darkTheme: ThemeService().darkTheme,
themeMode: ThemeService().getThemeMode(),
- add the async word to main function and add inside it this line of code to init the Get_Storage
await GetStorage.init();
- now to change theme from any where in your app use the themeService class like this :
ThemeService().changeTheme();
and that’s it Congratulations 👏 🎉 🥳 your app support the dart theme
- Hey don’t leave this page without read the lines bellow it’s So Important😃
Preparing and writing these lessons takes a lot of time and work from me so do not forget to clap 👏 to it here and share the lesson and support my channel in YouTube by writing comments and subscribe to it and certainly hit the like button 👍
Thank You
