how to get notified whenever the user changes the os theme in flutter?
Solution 1
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
),
);
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
}
and then inside the didChangePlatformBrightness
you can add to your stream.
This is also duplicate. click here to view
Solution 2
Thank you for your answers. I solved the Problem like this:
class Theme {
final window = WidgetsBinding.instance.window;
final _controller = StreamController<Brightness>();
Theme() {
window.onPlatformBrightnessChanged = () {
// This callback gets invoked every time brightness changes
final brightness = window.platformBrightness;
_controller.sink.add(brightness);
};
}
Stream<Brightness> get stream => _controller.stream;
}
so I built my own stream
Jad Haddad
Updated on December 29, 2022Comments
-
Jad Haddad over 1 year
I am trying to get notified, whenever the user changes the theme of the operating system. I want to use Provider to accomplish that, however dart Provider needs a Stream that gives a Snapshot, whenerver somthing is changed or getsupdated. So I need to emplement or rather use a Stream, that gives me a snapshot whenever the os theme gets changed.
Here is my code. It is nothing special. But I really want to know how to get this Provider up and running with a Stream
import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; void main() => runApp(MaterialApp(initialRoute: '/', routes: { '/': (context) => MainPage(), }));
This class is a wrapper for the HomePage. It contains the Provider. (value: brightnessStream) is a dummy value, and that is what I need to implement.
class MainPage extends StatefulWidget { @override _MainPageState createState() => _MainPageState(); } class _MainPageState extends State<MainPage> { @override Widget build(BuildContext context) { return StreamProvider<Brightness>.value( initialData: Brightness.light, value: brightnessStream, child: Home(), ); } }
In this class I am listening to the Stream, whenever the brightness changes and displying a text that shows the current theme.
class Home extends StatefulWidget { @override _HomeState createState() => _HomeState(); } class _HomeState extends State<Home> { @override Widget build(BuildContext context) { final brightness = Provider.of<Brightness>(context); return Scaffold( backgroundColor: Colors.white, appBar: AppBar( title: Text('App'), ), body: Center( child: Text(brightness.toString()), ), ); } }
the stream should like somethig like this.
Stream<Brightness> get brightnessStream { // return stream of os brigtness (os theme) }
So how is it possible?