Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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]);
    }
)
like image 999
iron59 Avatar asked Aug 13 '19 10:08

iron59


2 Answers

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.

like image 164
tewshi Avatar answered Sep 21 '22 15:09

tewshi


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;
    }
}
like image 26
DSMan97 Avatar answered Sep 21 '22 15:09

DSMan97