Detect if iOS13 Dark Mode is enabled from Flutter/Dart [duplicate]

Question

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]);
    }
)

This is now on their 2019 milestone

Alex Fallenstedt
– Alex Fallenstedt

2019-08-30 16:39:57 +00:00
Commented Aug 30, 2019 at 16:39 — Alex Fallenstedt
– Alex Fallenstedt, Commented Aug 30, 2019 at 16:39

tewshi · Accepted Answer · 2020-01-31 07:30:09Z

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.

edited Jan 31, 2020 at 7:30

answered Oct 3, 2019 at 22:08

tewshi

6555 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Bo Kristensen Over a year ago

Does this work for iOS13 or only Android10?

tewshi Over a year ago

I've not updated to Android 10, but it works on iOS13... perfectly!

Bo Kristensen Over a year ago

Super sweet, I can confirm that this works for Android 10 ;)

sermet Over a year ago

It didn't work on iOS.

ArthurEKing Over a year ago

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?

|

DSMan97 · Accepted Answer · 2019-10-02 17:33:21Z

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;
    }
}

edited Oct 2, 2019 at 17:33

answered Sep 29, 2019 at 14:56

DSMan97

975 bronze badges

2 Comments

flutter Over a year ago

what is the iOS 13 variable...where would it go in the project?

DSMan97 Over a year ago

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

Collectives™ on Stack Overflow

Detect if iOS13 Dark Mode is enabled from Flutter/Dart [duplicate]

2 Answers 2

8 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Linked

Related