14

I'm writing a Flutter app for Android and iOS which will change its style/theme based on iOS' Dark Mode status.

Is there currently anything like a MediaQuery.isDarkModeEnabled in Flutter?

There is a GitHub issue open here but the Flutter team must be overwhelmed in issues so I can't see this being implemented too soon.

I can use 'traitCollection.userInterfaceStyle' from iOS-specific code channels, but adding platform-specific code for Flutter/Dart apps is not something I'm experienced in. Currently working on this solution!

For example, someone could have a CupertinoPicker with adaptive colors:

CupertinoPicker(
    backgroundColor: isDarkModeEnabled ? Colors.black : Colors.white,
    children: items.map((thisItem) => Text(thisItem.name)).toList(),
    itemExtent: 32,
    onSelectedItemChanged: (newItem) {
        setState(() => this.item = items[newItem]);
    }
)
RKRK
  • 1,284
  • 5
  • 14
  • 18
iron59
  • 555
  • 2
  • 5
  • 12

2 Answers2

24

Here's how you can set different colors for light and dark mode, the app will automatically switch if the phone is set to dark mode or light mode.

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.red,
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    // additional settings go here
  ),
);

::Update::

You can also get the platform brightness (Brightness.light / Brightness.dark) using

WidgetsBinding.instance.window.platformBrightness

but you will have to use the WidgetsBindingObserver mixin and override the method below

@override
void didChangePlatformBrightness() {
    print(WidgetsBinding.instance.window.platformBrightness); // should print Brightness.light / Brightness.dark when you switch
    super.didChangePlatformBrightness(); // make sure you call this
}

see https://api.flutter.dev/flutter/widgets/WidgetsBindingObserver-class.html on how to use the mixin.

tewshi
  • 615
  • 5
  • 9
  • Does this work for iOS13 or only Android10? – Bo Kristensen Oct 28 '19 at 14:33
  • 2
    I've not updated to Android 10, but it works on iOS13... perfectly! – tewshi Oct 29 '19 at 07:49
  • 2
    Super sweet, I can confirm that this works for Android 10 ;) – Bo Kristensen Nov 06 '19 at 14:03
  • It didn't work on iOS. – sermet Jan 03 '20 at 07:36
  • Weirdly enough, I just tried this on iOS, and darkTheme keeps returning as undefined. So that's not an option. Am I missing a dependancy? Or do you have any other ideas? – ArthurEKing Jan 27 '20 at 17:56
  • What did you try, can we see? @ArthurEKing – tewshi Jan 31 '20 at 06:58
  • I ended up having to do it manually, as there is no property darkTheme in either CupertinoApp or CupertinoThemeData. So what I ended up doing was setting a bool Brightness brightness = MediaQuery.platformBrightnessOf(context); bool isDark = brightness == Brightness.dark; and them creating the two manual ThemeData's dependant on the result of the bool. It's not a streamlined, but it works. – ArthurEKing Jan 31 '20 at 15:43
  • so, yes, you're right, darkTheme property is not in CupertinoApp (at the moment) – tewshi Feb 06 '20 at 11:26
8

Yes it is possible. Look here https://github.com/flutter/flutter/issues/33873#issuecomment-536309491 and here is the answer.

if(ios13==true){
    bool qDarkmodeEnable;
    var qdarkMode = MediaQuery.of(context).platformBrightness;
    if (qdarkMode == Brightness.dark){
        qDarkmodeEnable=true;
    } else {
        qDarkmodeEnable=false;
    }
}
DSMan97
  • 97
  • 5
  • what is the iOS 13 variable...where would it go in the project? – flutter Oct 23 '19 at 20:06
  • I use sharedPreferences and deviceInfo libs with devices info obtain the version of iOS or Android and return true if the iOS version is 13.0 and save the value on sharedPreferences. I hope that may be help you – DSMan97 Oct 24 '19 at 22:15