Getx: How can I listening the Get.isDarkMode value Changed?

[lycstar]

I use these code to change theme.

CupertinoSwitch( value: Get.isDarkMode, onChanged: (value) { Get.changeTheme(Get.isDarkMode ? ThemeConst.lightTheme : ThemeConst.darkTheme); })

and in my home bottomNavigationBar,I use these code to implemment the color‘s change when different theme,but it not change.
unselectedItemColor: Get.isDarkMode ? Colors.grey[300] : Colors.black,

so I should do what to fix it.

[eduardoflorence]

Hi @lycstar, Get.isDarkMode is not an observable, you will not be able to listen.
I advise you to create a controller to manage your theme configuration and use Obx wherever you need to listen. Here's an example:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  Get.put(ThemeController());
  runApp(GetMaterialApp(home: Home()));
} 


class Home extends StatelessWidget {
  @override
  Widget build(context) {
    final controller = Get.find<ThemeController>();
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              child: Text('Change Theme'),
              onPressed: () => controller.changeTheme()
            ),
            Obx(
              () => Text('I am in ${controller.isDarkMode.value ? 'Dark' : 'Light'} mode'),
            ),
          ],
        ),
      ),
    );
  }
}

class ThemeController extends GetxController {
  RxBool isDarkMode = false.obs;

  changeTheme() {
    Get.changeTheme(Get.isDarkMode ? ThemeData.light() : ThemeData.dark());
    isDarkMode.toggle();
  }
}

[Nipodemos]

but doesn't that means that Get.isDarkMode will be outdated whenever a change is made? I mean, in your code I don't see how the variable updates. Maybe Get.changeTheme updates Get.isDarkMode variable? if so, then this is perfect.

[eduardoflorence]

Hi @Nipodemos,
Get.isDarkMode will not be outdated.
ThemeData.dark() or ThemeData.light() change the brightness property of the theme.

/// Check if dark mode theme is enable
bool get isDarkMode => (theme.brightness == Brightness.dark);

[eduardoflorence]

I think this part of the code would look better like this:

changeTheme() {
  Get.changeTheme(Get.isDarkMode ? ThemeData.light() : ThemeData.dark());
  isDarkMode.value = Get.isDarkMode;
}

[Nipodemos]

that is a piece of code worth of being in a examples page.

[lycstar]

@eduardoflorence I see. Thank you very much for your answer.

[lycstar]

that is a piece of code worth of being in a examples page.

I agree with you

[eduardoflorence]

Hi @lycstar and @Nipodemos ,
GetX version 3.20.0 has just been released and added context.isDarkMode to context extensions.
Replace Get.isDarkMode with context.isDarkMode and will have the immediate effect of change

CupertinoSwitch( 
  value: context.isDarkMode, 
  onChanged: (value) { 
    Get.changeTheme(context.isDarkMode ? ThemeConst.lightTheme : ThemeConst.darkTheme); 
  }
)
...
unselectedItemColor: context.isDarkMode ? Colors.grey[300] : Colors.black,

[lycstar]

@eduardoflorence Thank you!I will try.(⁎⚈᷀᷁ᴗ⚈᷀᷁⁎)