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