How to listen for changes to platformBrightness in Flutter?
Solution 1
Override initState
method and use onPlatformBrightnessChanged
:
@override
void initState() {
super.initState();
var window = WidgetsBinding.instance!.window;
// This callback is called every time the brightness changes.
window.onPlatformBrightnessChanged = () {
var brightness = window.platformBrightness;
};
}
To handle default behavior, add the following line in above callback. Thanks to @DJafari
WidgetsBinding.instance?.handlePlatformBrightnessChanged();
Solution 2
Listen to changes using (from WidgetsBinding)
void didChangePlatformBrightness()
https://api.flutter.dev/flutter/widgets/WidgetsBindingObserver/didChangePlatformBrightness.html
Solution 3
@CopsOnRoad answer works perfectly, but it disabled auto reaction to platform brightness change in your widgets, to fix this problem use this :
@override
void initState() {
super.initState();
var window = WidgetsBinding.instance!.window;
window.onPlatformBrightnessChanged = () {
WidgetsBinding.instance?.handlePlatformBrightnessChanged();
// This callback is called every time the brightness changes.
var brightness = window.platformBrightness;
};
}
another way to handle this :
class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
@override
void initState() {
WidgetsBinding.instance?.addObserver(this);
super.initState();
}
@override
void dispose() {
WidgetsBinding.instance?.removeObserver(this);
super.dispose();
}
@override
void didChangePlatformBrightness() {
var brightness = Theme.of(context).brightness;
super.didChangePlatformBrightness();
}
}
Benjamin
Hi! I'm a sophomore in High School and I love computers & programming. I'm familiar with Flutter & Dart. I also do web development and am pretty good at HTML, CSS, and JS. I typically use the Angular framework with TypeScript. TL;DR Languages I know: HTML, CSS, JS Dart Lua TypeScript (if you count that as a language) Frameworks I know: Angular Flutter Svelte
Updated on December 14, 2022Comments
-
Benjamin over 1 year
I'm setting up a system where when the user changes the system theme to dark mode, it changes the theme and with Flutter, it works all well and good! However, when the user changes the system theme, the system navigation and status bar don't change their colors. I have code running on the home page inside the build method but that doesn't seem to do it. Here's the code inside the home page build method:
class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { Brightness sysBrightness = MediaQuery.of(context).platformBrightness; if (sysBrightness == Brightness.dark) Themes.setDarkSystemColors(); else Themes.setLightSystemColors(); return Scaffold( appBar: CustomAppBar(title: "Home"), drawer: CustomDrawer(), body: SizedBox(), ); } }
Here's the code in the main app with
theme:
anddarkTheme:
:return MaterialApp( initialRoute: '/', routes: routes, navigatorObservers: [_routeObserver], theme: Themes.lightTheme, darkTheme: Themes.darkTheme, debugShowCheckedModeBanner: false, title: 'School Life', );