How to turn other screens to Dark Mode - flutter

Question

I have managed to implement a Darkmode into my app, however I don't know how to implement dark mode into other screens, so that when I press a button in settings the whole app goes into dark mode. I know it has something to do with notifying the listeners but I don't know where to begin.
Currently I am using shared preferences to store the dark mode and I have a separate file for the theme.
My Question is effectively how do I implement dark mode into other screens?
Here is my main controller code
import 'themes.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(Darkmode());
class Darkmode extends StatelessWidget {
#override
Widget build(BuildContext context) {
/// Here we are asynchronously passing an instance of SharedPreferences
/// to our Settings ChangeNotifier class and that in turn helps us
/// determine the basic app settings to be applied whenever the app is
/// launched.
return FutureBuilder<SharedPreferences>(
future: SharedPreferences.getInstance(),
builder:
(BuildContext context, AsyncSnapshot<SharedPreferences> snapshot) {
return ChangeNotifierProvider<Settings>.value(
value: Settings(snapshot.data),
child: _Darkmode(),
);
},
);
}
}
class _Darkmode extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: Provider.of<Settings>(context).isDarkMode
? setDarkTheme
: setLightTheme,
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
widget.title,
style: TextStyle(color: Theme.of(context).accentColor),
),
actions: <Widget>[
IconButton(
icon: Icon(Provider.of<Settings>(context).isDarkMode
? Icons.brightness_high
: Icons.brightness_low),
onPressed: () {
changeTheme(
Provider.of<Settings>(context, listen: false).isDarkMode
? false
: true,
context);
},
),
],
),
body: Center(),
);
}
void changeTheme(bool set, BuildContext context) {
///Call setDarkMode method inside our Settings ChangeNotifier class to
///Notify all the listeners of the change.
Provider.of<Settings>(context, listen: false).setDarkMode(set);
}
}
Here is the Shared Preferences file:
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
/// Class that contains all your app settings
/// Consists only of Theme setting as of now
class Settings extends ChangeNotifier {
final SharedPreferences sharedPreferences;
Settings(this.sharedPreferences);
bool get isDarkMode => sharedPreferences?.getBool("isDarkMode") ?? false;
void setDarkMode(bool val) {
sharedPreferences?.setBool("isDarkMode", val);
notifyListeners();
}
}```

Answer 1

Use the ThemeData() to apply the theme to whole app!
bool isDarkMode = Provider.of<Settings>(context).isDarkMode
return MaterialApp(
theme: ThemeData(
primaryColor: isDarkMode ? Colors.blueGrey[900] : Colors.white,
accentColor: isDarkMode ? null : Colors.pink,
scaffoldBackgroundColor: isDarkMode ? Colors.blueGrey[900] : Colors.white,
brightness: isDarkMode ? Brightness.dark : Brightness.light,
backgroundColor: isDarkMode ? Colors.white : Colors.blueGrey[900],
dividerTheme: DividerThemeData(endIndent: 10, indent: 10),
iconTheme: IconThemeData(
color: isDarkMode ? Colors.white : Colors.grey[900]),
textTheme: Theme.of(context)
.textTheme
.apply(
displayColor: model.drakModeState
? Colors.white
: Colors.grey[900],
bodyColor: model.drakModeState
? Colors.white
: Colors.grey[900]),
),
);

Answer 2

This how you can ahieve this.
use Consumer. this widget will let you listen to changes in Settings
pass the new theme to your MaterialApp.
Then combine them.
class _Darkmode extends StatelessWidget {
#override
Widget build(BuildContext context) {
//settingProvider is the current instance of Settings (up to date)
return Consumer<Settings>(builder: (ctx, settingProvider, child)=> MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: settingProvider.isDarkMode
? setDarkTheme
: setLightTheme,
home: MyHomePage(title: 'Flutter Demo Home Page'),
));
}
}
This is some kind of realtime detection. Any time you'll change your theme, this code will update it for the whole app