CODEWITHSUNDEEP
androidflutterdartstreamprovider
Jad Haddad
Jad Haddad

Reputation: 121

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

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?

Upvotes: 3

Views: 1813

Answers (2)

Jad Haddad
Jad Haddad

Reputation: 121

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

Upvotes: 2

Moaid ALRazhy
Moaid ALRazhy

Reputation: 1744

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

Upvotes: 3

Related Questions