how to get notified whenever the user changes the os theme in flutter?

Question

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?

score 3 · Answer 1 · answered Apr 13 '21 at 00:29

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

score 1 · Answer 2 · answered Apr 13 '21 at 09:27

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

how to get notified whenever the user changes the os theme in flutter?

2 Answers2