skip to Main Content

I use the following code to implement multi them in my app, when I changed the them and select a new one, the whole app is changed correctly, except the current view which not changed, what the required modification to make the current view response to the changing in them:


 var selectedTheme = 'system'.obs;

 List<String> themes = ['system', 'light', 'dark'];

 void changeTheme(String theme) {
   selectedTheme.value = theme;
   ThemeMode themeMode;
   switch (theme) {
     case 'system':
       themeMode = ThemeMode.system;
       break;
     case 'light':
       themeMode = ThemeMode.light;
       break;
     case 'dark':
       themeMode = ThemeMode.dark;
       break;
     default:
       themeMode = ThemeMode.system;
   }
   Get.changeThemeMode(themeMode);
   saveSelectedTheme(theme);
 }

 ThemeMode getThemeMode() {
   switch (selectedTheme.value) {
     case 'light':
       return ThemeMode.light;
     case 'dark':
       return ThemeMode.dark;
     default:
       return ThemeMode.system;
      }
    }
   .....
   }

Below at the SettingsView I call the changeTheme function to change them:

 class SettingsView extends StatelessWidget {
 final SettingsController controller = Get.put(SettingsController());
 SettingsView({super.key});
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     backgroundColor: Get.isDarkMode
         ? AppTheme.darkBackgroundColor
         : AppTheme.lightBackgroundColor,
     appBar:CustomAppBar(title:  'settings'.tr),
     body: Padding(
       padding: const EdgeInsets.all(16.0),
       child: Column(
         children: [
           ListTile(
             title: Text(
               'app_theme'.tr,
               style: const TextStyle(fontFamily: 'Alexandria'),
             ),
             subtitle: Obx(
                   () => Text(
                 controller.selectedTheme.value,
                 style: const TextStyle(fontFamily: 'Alexandria'),
               ),
             ),
             leading: const Icon(Icons.brightness_6),
             trailing: DropdownButton<String>(
               value: controller.selectedTheme.value,
               items: controller.themes.map((theme) {
                 return DropdownMenuItem(
                   value: theme,
                   child: Text(
                     theme,
                     style: const TextStyle(fontFamily: 'Alexandria'),
                   ),
                 );
               }).toList(),
               onChanged: (value) {
                 if (value != null) {
                   controller.changeTheme(value);
                 }
               },
             ),
           ),

2

Answers


  1. can you please try again by converting the stateless widget into stateful widget

    Login or Signup to reply.
  2. While I cannot identify your problem by looking at the code provided, I have several pieces of advice.

    1. Create a project using get_cli. This way you will be sure that everything is set up properly.
    2. You do not need a GetXConroller to update the mode. Just call Get.changeThemeMode from the select handler.
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search