Stack Overflow Error in Flutter utilizing ChangeNotifierProvider? - flutter

I am receiving the following error -
I/flutter (18695): The following StackOverflowError was thrown building Consumer(dirty, dependencies:
I/flutter (18695): [_DefaultInheritedProviderScope]):
I/flutter (18695): Stack Overflow
This seems to relate to error in my Consumer. I am using Provider plugin to try to create a toggle button for Dark Mode in Flutter.
See below for my files -
appstatenotifier.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
ThemeData light = ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.indigo,
accentColor: Colors.pink,
scaffoldBackgroundColor: Color(0xfff1f1f1)
);
ThemeData dark = ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.indigo,
accentColor: Colors.pink,
);
class ThemeNotifier with ChangeNotifier {
final String key = "theme";
SharedPreferences prefs;
bool _darkTheme;
bool get darkTheme => darkTheme;
ThemeNotifier() {
_darkTheme = false;
}
toggleTheme() {
_darkTheme = !_darkTheme;
notifyListeners();
}
}
Below is my main.dart relevant Widgets
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
var themeData = ThemeData(
primarySwatch: Colors.blue,
);
return ChangeNotifierProvider(
create: (_) => ThemeNotifier(),
child: Consumer<ThemeNotifier>(
builder: (context, ThemeNotifier notifier, child) {
return MaterialApp(
theme: notifier.darkTheme ? dark : light,
title: 'Work Out Log',
routes: MyApp.routes,
);
}
),
);
}
}
Widget buildDrawer(context) {
return Drawer(
child: ListView(
children: <Widget>[
ListTile(
title: Text('Dark Theme'),
trailing: Consumer<ThemeNotifier>(
builder: (context, notifier, child) => SwitchListTile(
title: Text("Dark mode"),
onChanged: (val) {
notifier.toggleTheme();
},
value: notifier.darkTheme,
),
),
),
],
),
);
}
Any idea why it's throwing this error?

As Viren V Varasadiya pointed out, your getter for darkTheme is incorrect:
bool get darkTheme => darkTheme;
Presumably, you meant to point it at _darkTheme, but instead you have the getter that is returning itself. This means that any time you call darkTheme, the getter looks up the value of darkTheme, which makes the getter look up the value of darkTheme, which makes the getter look up the value of darkTheme, which makes the getter look up the value of darkTheme, which makes the getter look up... (hopefully you get the idea).
You just need to change the getter to return the correct thing:
bool get darkTheme => _darkTheme;

You Must be Retruning the same thing as the class name

Related

Getx flutter change theme when i change theme dark and then return light mode its not loading my custom theme

Getx flutter when i change theme from light to dark mode and then return to light mode its not returning my custom theme its load old app bar background even theme changes
ThemeData lightTheme = ThemeData(
useMaterial3: true,
backgroundColor: Colors.white,
appBarTheme: AppBarTheme(
elevation: 1000,
backgroundColor: Colors.white,
)
);
ThemeData darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.red);
Getx flutter when i change theme from light to dark mode and then return to light mode its not returning my custom theme its load old app bar background even theme changes
class _MyMaterialAppState extends State<MyMaterialApp> {
#override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: appName,
theme: lightTheme,
darkTheme: darkTheme,
translations: Languages(),
locale: Get.deviceLocale,
fallbackLocale: const Locale('en', 'US'),
home: const MyHomePage(),
);
}
}
The documentation of GetX Itself says that you should not depend on any higher level widget than GetMaterialApp in order to update it. This can trigger duplicate keys.
I have seen your code and I tried to test this on physical devide and it works perfectly fine.
Here's the code:
import 'package:flutter/material.dart';
import 'package:get/route_manager.dart';
ThemeData lightTheme = ThemeData(
useMaterial3: true,
backgroundColor: Colors.white,
appBarTheme: AppBarTheme(
elevation: 1000,
backgroundColor: Colors.white,
));
ThemeData darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.red);
void main(List<String> args) {
runApp(MyMaterialApp());
}
class MyMaterialApp extends StatelessWidget {
const MyMaterialApp({super.key});
#override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: "appName",
theme: lightTheme,
darkTheme: darkTheme,
// translations: Languages(),
locale: Get.deviceLocale,
fallbackLocale: const Locale('en', 'US'),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("data"),
),
body: Column(
children: [
Center(
child: TextButton(
onPressed: () {
Get.changeTheme(ThemeMode.dark);
// Get.changeThemeMode(ThemeMode.dark);
},
child: Text("Chage"),
),
),
Center(
child: TextButton(
onPressed: () {
Get.changeThemeMode(ThemeMode.light);
},
child: Text("Chage light"),
),
),
],
),
);
}
}
Probably, this is because of the GetMaterialApp widget in the build method. Because the build method is called every time the widget is updated, this means that your custom theme will be overwritten. You can do something like this:
class _MyMaterialAppState extends State<MyMaterialApp> {
GetxController<ThemeData> _themeController = GetxController(lightTheme);
#override
Widget build(BuildContext context) {
return GetBuilder<GetxController<ThemeData>>(
init: _themeController,
builder: (_, theme) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: appName,
theme: theme.value,
darkTheme: darkTheme,
translations: Languages(),
locale: Get.deviceLocale,
fallbackLocale: const Locale('en', 'US'),
home: const MyHomePage(),
);
},
);
}
}
This code uses GetBuilder to listen for changes to the _themeController and update theme property.
To change the theme:
_themeController.updateValue(newTheme)

Save a theme (Flutter/Dart)

Good morning,
Here I have two buttons that change the theme of my application (light and dark). When I reload my app the theme is not the one I selected last. I would like the application to back up the last theme used locally. You may need to save just a number that indicates which theme used the last one. . . But I don’t know at all how to do this?
Here’s the code: main.dart
import 'package:flutter/material.dart';
import 'package:animated_splash_screen/animated_splash_screen.dart';
import 'package:watch/nav.dart';
import 'package:page_transition/page_transition.dart';
import 'package:watch/blocs/theme.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider<ThemeChanger>(
builder: (_) => ThemeChanger(ThemeData.dark()),
child: MaterialAppWithTheme(),
);
}
}
class MaterialAppWithTheme extends StatelessWidget {
#override
Widget build(BuildContext context) {
final theme = Provider.of<ThemeChanger>(context);
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: theme.getTheme(),
home: AnimatedSplashScreen(
duration: 3000,
splash: "",
splashTransition: SplashTransition.slideTransition,
pageTransitionType: PageTransitionType.downToUp,
nextScreen: Nav(),
),
);
}
}
settings.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:watch/blocs/theme.dart';
import 'package:watch/constants.dart';
class Parametres extends StatelessWidget {
#override
Widget build(BuildContext context) {
ThemeChanger _themeChanger = Provider.of<ThemeChanger>(context);
return Scaffold(
appBar: AppBar(
title: Text('Paramètres', style: kAppBarStyle,),
elevation: 0,
automaticallyImplyLeading: false,
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(
Icons.arrow_back,
),
),
),
body: Container(
child: Column(
children: <Widget>[
FlatButton(
onPressed: () => _themeChanger.setTheme(
ThemeData(
bottomNavigationBarTheme: bNavBar,
scaffoldBackgroundColor: kBlackMedium,
brightness: Brightness.dark,
iconTheme: bIcons,
)),
child: Text('Dark Theme')),
FlatButton(
onPressed: () => _themeChanger.setTheme(
ThemeData(
bottomNavigationBarTheme: lNavBar,
scaffoldBackgroundColor: Colors.white,
brightness: Brightness.light,
iconTheme: lIcons,
primaryColor: kWhite,
)),
child: Text('Light Theme')),
],
),
),
);
}
}
Thank you
Shared preference is best option for it. Since I don't know about your ThemeChanger class I add here my theme class first:
class MyThemeModel extends ChangeNotifier{
ThemeData _themedata;
MyThemeModel(bool isActive){
if(isActive == null){
getThemeData;
}
else{
if(isActive){
_themedata = sleepTheme;
}
else{
_themedata = morningTheme;
}
}
}
ThemeData get getThemeData => _themedata;
void setThemeData(ThemeData data){
_themedata = data;
notifyListeners();
}
}
In main.dart
void main() async{
var isSleepActive;
if(SharedPrefHelper.prefInstance.checkContains(SharedPrefKeys.ISMORNING)){
isSleepActive = SharedPrefHelper.prefInstance.getBool(SharedPrefKeys.ISMORNING);
}
else{
isSleepActive = false;
}
runApp(MultiProvider(
providers: [
ChangeNotifierProvider(
builder: (context) => MyThemeModel(isSleepActive),
)
],
child: MyApp(),
)
);
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: Provider.of<MyThemeModel>(context).getThemeData,
title: 'Theme App',
home: AnimatedSplashScreen(
duration: 3000,
splash: "",
splashTransition: SplashTransition.slideTransition,
pageTransitionType: PageTransitionType.downToUp,
nextScreen: Nav(),
),
debugShowCheckedModeBanner: false,
);
}
In order to change theme with flat button:
FlatButton(
onPressed: () => myThemeModel.setThemeData(
ThemeData(
bottomNavigationBarTheme: lNavBar,
scaffoldBackgroundColor: Colors.white,
brightness: Brightness.light,
iconTheme: lIcons,
primaryColor: kWhite,
)),
child: Text('Light Theme')),
Use the Shared Preference package and there you can store simple values as key pair values.Load that data in the init of the initial screen so that you can display the screen according to the theme
You should use local memory to save theme.
You can use shared preference or hive db or sqflite or other database system.
About changing theme you can use Cubit,Bloc,Provider or etc or even if ValueNotifier.
However you should wrap your MaterialApp or CupertinoApp with "your state management widget"
And add some Logic
OR you can use some library
Library to change theme

How to implement Dark mode and Light Mode in flutter?

I want to create a flutter app that has 2 light and dark mode themes that change by a switch in-app and the default theme is default android theme.
I need to pass some custom color to the fellow widget and I don't want to just config material theme.
how to detect the user device default theme?
the secend question is how to provide a theme to the whole app?
third is how change the theme with a simple switch in running time?
Using Material App
MaterialApp(
title: 'App Title',
theme: ThemeData(
brightness: Brightness.light,
/* light theme settings */
),
darkTheme: ThemeData(
brightness: Brightness.dark,
/* dark theme settings */
),
themeMode: ThemeMode.dark,
/* ThemeMode.system to follow system theme,
ThemeMode.light for light theme,
ThemeMode.dark for dark theme
*/
debugShowCheckedModeBanner: false,
home: YourAppHomepage(),
);
Using CupertinoApp
Detect the dark mode using, WidgetsBinding.instance?.window.platformBrightness
You may also have to listen for the brightness changes from the system in order to update in real-time using WidgetsBindingObserver, and overriding, didChangePlatformBrightness();
CupertinoApp Example:
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
Brightness? _brightness;
#override
void initState() {
WidgetsBinding.instance?.addObserver(this);
_brightness = WidgetsBinding.instance?.window.platformBrightness;
super.initState();
}
#override
void dispose() {
WidgetsBinding.instance?.removeObserver(this);
super.dispose();
}
#override
void didChangePlatformBrightness() {
if (mounted) {
setState(() {
_brightness = WidgetsBinding.instance?.window.platformBrightness;
});
}
super.didChangePlatformBrightness();
}
CupertinoThemeData get _lightTheme =>
CupertinoThemeData(brightness: Brightness.light, /* light theme settings */);
CupertinoThemeData get _darkTheme => CupertinoThemeData(
brightness: Brightness.dark, /* dark theme settings */,
);
#override
Widget build(BuildContext context) {
return CupertinoApp(
title: 'Demo App',
theme: _brightness == Brightness.dark ? _darkTheme : _lightTheme,
home: MyHomePage(title: 'Demo Home Page'),
);
}
}
You can use scoped_model, provider, bloc or get for seamless experience.
Below are three ways to implement Dark Mode:
always Dark mode
device/platform controlled dark mode
app controlled, runtime switchable dark mode
Always Dark Mode
To run your app only in Dark Mode:
in MaterialApp, replace ThemeData(...) with ThemeData.dark()
restart your app. It will now be running in Dark Mode using the colors defined in ThemeData.dark()
OLD
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
NEW
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.dark(), // default dark theme replaces default light theme
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
Device Controlled Dark Mode
works only on Android 10+, iOS 13+ (when dark mode was introduced)
to let the device/platform set the theme, MaterialApp needs 3 args:
theme: ThemeData()
darkTheme: ThemeData().dark
themeMode: ThemeMode.system
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(),
darkTheme: ThemeData.dark(), // standard dark theme
themeMode: ThemeMode.system, // device controls theme
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
(you can use custom themes. Above are defaults for simplicity)
themeMode: ThemeMode.system tells Flutter to use the device/platform theme setting
with the above settings on Android 10+ or iOS 13+, toggling Dark mode via Device Settings will now switch your app between light and dark modes.
on Android: drag down from top of screen and click the Dark theme toggle button.
iOS physical device: Settings > Display & Brightness > Light or Dark.
iOS: add Dark mode switch to Control Center for ease of testing
iOS simulator: Settings > Developer > Dark Appearance.
any time the device theme changes, your app will immediately reflect the chosen device theme
to get the current device theme mode programmatically, we can check device brightness (Brightness.light or Brightness.dark) which corresponds to light mode and dark mode. Do this by querying platformBrightness with: MediaQuery.of(context).platformBrightness
App Controlled Dark Mode
our app can run in either light or dark mode, controlled by user and switched freely at runtime inside the app and completely ignore the device's theme setting
as before, supply all three theme arguments to MaterialApp: theme:, darkTheme: and themeMode:, but we'll adjust themeMode: to use a state field below
To switch between light / dark modes within the app, we'll swap the themeMode: argument between ThemeMode.light and ThemeMode.dark and rebuild the MaterialApp widget.
How to Rebuild MaterialApp widget
to switch our app theme from anywhere, we need to access MaterialApp from anywhere in our app
we can do this without any package using just StatefulWidget, or we can use a state management package
example of runtime theme switching anywhere in app using StatefulWidget below
Before - Stateless
we started with this, but we'll replace it with a StatefulWidget next
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(),
darkTheme: ThemeData.dark(), // standard dark theme
themeMode: ThemeMode.system, // device controls theme
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
After - Stateful
here we've replaced MyApp StatelessWidget with a StatefulWidget and its complementary State class, _MyAppState
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(),
darkTheme: ThemeData.dark(), // standard dark theme
themeMode: ThemeMode.system, // device controls theme
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
Add Static Accessor to StatefulWidget
adding this static of() method to our StatefulWidget makes its State object accessible for any descendant widget
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
/// ↓↓ ADDED
/// InheritedWidget style accessor to our State object.
static _MyAppState of(BuildContext context) =>
context.findAncestorStateOfType<_MyAppState>()!;
}
/// State object hidden ↓. Focusing on ↑ StatefulWidget here.
note the return Type of our of() method: _MyAppState
we're not getting the StatefulWidget, we're getting its State object: _MyAppState
_MyAppState will hold the "state" of our ThemeMode setting (in next step). This is what controls our app's current theme.
next in our _MyAppState class we'll add a ThemeMode "state" field and a method to change theme & rebuild our app
_MyAppState
below is our State class modified with:
a "state" field _themeMode
MaterialApp themeMode: arg using _themeMode state field value
changeTheme method
class _MyAppState extends State<MyApp> {
/// 1) our themeMode "state" field
ThemeMode _themeMode = ThemeMode.system;
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(),
darkTheme: ThemeData.dark(),
themeMode: _themeMode, // 2) ← ← ← use "state" field here //////////////
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
/// 3) Call this to change theme from any context using "of" accessor
/// e.g.:
/// MyApp.of(context).changeTheme(ThemeMode.dark);
void changeTheme(ThemeMode themeMode) {
setState(() {
_themeMode = themeMode;
});
}
}
next, we'll show how to access changeTheme() to change our theme & rebuild the app
Change Theme & Rebuild
below is an example of using the of() accessor method to find our State object and call its changeTheme method from the two buttons below which call:
MyApp.of(context).changeTheme(ThemeMode.light)
MyApp.of(context).changeTheme(ThemeMode.dark)
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({required this.title});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Choose your theme:',
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
/// //////////////////////////////////////////////////////
/// Change theme & rebuild to show it using these buttons
ElevatedButton(
onPressed: () => MyApp.of(context).changeTheme(ThemeMode.light),
child: Text('Light')),
ElevatedButton(
onPressed: () => MyApp.of(context).changeTheme(ThemeMode.dark),
child: Text('Dark')),
/// //////////////////////////////////////////////////////
],
),
],
),
),
);
}
}
To return theme control back to the device's Dark mode setting, create a third button that makes a call to set themeMode: to ThemeMode.system:
MyApp.of(context).changeTheme(ThemeMode.system)
Running this method will delegate control of the app's theme back to whatever Dark mode setting the device is currently using.
Code: Complete copy-paste code available in this gist.
The easiest way in my opinion is by using provider to manage the state of your app and shared_preferences to save your theme preference on file system. By following this procedure you can save your theme so the user doesn't have to switch theme every time.
Output
You can easily store your theme preference in form of a string and then at the start of your app check if there is value stored on file system, if so apply that theme as shown below.
StorageManager.dart
import 'package:shared_preferences/shared_preferences.dart';
class StorageManager {
static void saveData(String key, dynamic value) async {
final prefs = await SharedPreferences.getInstance();
if (value is int) {
prefs.setInt(key, value);
} else if (value is String) {
prefs.setString(key, value);
} else if (value is bool) {
prefs.setBool(key, value);
} else {
print("Invalid Type");
}
}
static Future<dynamic> readData(String key) async {
final prefs = await SharedPreferences.getInstance();
dynamic obj = prefs.get(key);
return obj;
}
static Future<bool> deleteData(String key) async {
final prefs = await SharedPreferences.getInstance();
return prefs.remove(key);
}
}
Define your theme properties in a theme variable like below and initialize your _themedata variable on the basis of value inside storage.
ThemeManager.dart
import 'package:flutter/material.dart';
import '../services/storage_manager.dart';
class ThemeNotifier with ChangeNotifier {
final darkTheme = ThemeData(
primarySwatch: Colors.grey,
primaryColor: Colors.black,
brightness: Brightness.dark,
backgroundColor: const Color(0xFF212121),
accentColor: Colors.white,
accentIconTheme: IconThemeData(color: Colors.black),
dividerColor: Colors.black12,
);
final lightTheme = ThemeData(
primarySwatch: Colors.grey,
primaryColor: Colors.white,
brightness: Brightness.light,
backgroundColor: const Color(0xFFE5E5E5),
accentColor: Colors.black,
accentIconTheme: IconThemeData(color: Colors.white),
dividerColor: Colors.white54,
);
ThemeData _themeData;
ThemeData getTheme() => _themeData;
ThemeNotifier() {
StorageManager.readData('themeMode').then((value) {
print('value read from storage: ' + value.toString());
var themeMode = value ?? 'light';
if (themeMode == 'light') {
_themeData = lightTheme;
} else {
print('setting dark theme');
_themeData = darkTheme;
}
notifyListeners();
});
}
void setDarkMode() async {
_themeData = darkTheme;
StorageManager.saveData('themeMode', 'dark');
notifyListeners();
}
void setLightMode() async {
_themeData = lightTheme;
StorageManager.saveData('themeMode', 'light');
notifyListeners();
}
}
Wrap your app with themeProvider and then apply theme using consumer. By doing so whenever you change the value of theme and call notify listeners widgets rebuild to sync changes.
Main.dart
void main() {
return runApp(ChangeNotifierProvider<ThemeNotifier>(
create: (_) => new ThemeNotifier(),
child: MyApp(),
));
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Consumer<ThemeNotifier>(
builder: (context, theme, _) => MaterialApp(
theme: theme.getTheme(),
home: Scaffold(
appBar: AppBar(
title: Text('Hybrid Theme'),
),
body: Row(
children: [
Container(
child: FlatButton(
onPressed: () => {
print('Set Light Theme'),
theme.setLightMode(),
},
child: Text('Set Light Theme'),
),
),
Container(
child: FlatButton(
onPressed: () => {
print('Set Dark theme'),
theme.setDarkMode(),
},
child: Text('Set Dark theme'),
),
),
],
),
),
),
);
}
}
Here is the link to github repository.
Letting the system handle themes:
runApp(
MaterialApp(
theme: ThemeData.light(), // Provide light theme
darkTheme: ThemeData.dark(), // Provide dark theme
home: HomePage(),
),
);
Handling the themes yourself:
Use provider to set the theme programmatically. Full code:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider<ThemeModel>(
create: (_) => ThemeModel(),
child: Consumer<ThemeModel>(
builder: (_, model, __) {
return MaterialApp(
theme: ThemeData.light(), // Provide light theme.
darkTheme: ThemeData.dark(), // Provide dark theme.
themeMode: model.mode, // Decides which theme to show.
home: Scaffold(
appBar: AppBar(title: Text('Light/Dark Theme')),
body: ElevatedButton(
onPressed: () => model.toggleMode(),
child: Text('Toggle Theme'),
),
),
);
},
),
);
}
}
class ThemeModel with ChangeNotifier {
ThemeMode _mode;
ThemeMode get mode => _mode;
ThemeModel({ThemeMode mode = ThemeMode.light}) : _mode = mode;
void toggleMode() {
_mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}
}
Answering OP questions:
Current theme can be found using:
bool isDarkMode = MediaQuery.of(context).platformBrightness == Brightness.dark;
or
bool isDarkMode = SchedulerBinding.instance.window.platformBrightness == Brightness.dark;
You can provide theme to your whole app using theme for default themes, darkTheme for Dark themes (if dark mode is enabled by the system or by you using themeMode)
You can make use of provider package as shown in the code above.
MaterialApp(
theme: ThemeData.light(),
/// theme: ThemeData.dark(),
)
Down the widget tree, you can access ThemeData simply by writing Theme.of(context). If you want to access the current ThemeData and provide your own styling for certain field, you can do for an instance:
Widget build(BuildContext context) {
var themeData = Theme.of(context).copyWith(scaffoldBackgroundColor: darkBlue)
return Scaffold(
backgroundColor = themeData.scaffoldBackgroundColor,
);
}
But to handle the ThemeData state (changing its value), you need to implement proper state management.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(), // Provide light theme.
darkTheme: ThemeData.dark(), // Provide dark theme.
themeMode: ThemeMode.system,
home: Scaffold(
appBar: AppBar(),
body: Container(),
),
);
}
}
Screenshot:
If you don't want to use any third party packages or plugins, you can use ValueListenableBuilder which comes out of the box with Flutter.
Full code:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final ValueNotifier<ThemeMode> _notifier = ValueNotifier(ThemeMode.light);
#override
Widget build(BuildContext context) {
return ValueListenableBuilder<ThemeMode>(
valueListenable: _notifier,
builder: (_, mode, __) {
return MaterialApp(
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
themeMode: mode, // Decides which theme to show, light or dark.
home: Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => _notifier.value = mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light,
child: Text('Toggle Theme'),
),
),
),
);
},
);
}
}
Here is a code
In this code you i've made custom theme according to my requirements you can change it!!
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Theme',
debugShowCheckedModeBanner: false,
/* light theme settings */
theme: ThemeData(
primarySwatch: Colors.blue,
primaryColor: Colors.white,
brightness: Brightness.light,
accentColor: Colors.black,
accentIconTheme: IconThemeData(color: Colors.white),
dividerColor: Colors.white54,
scaffoldBackgroundColor: Colors.white,
),
/* Dark theme settings */
darkTheme: ThemeData(
primarySwatch: Colors.blue,
primaryColor: Colors.black,
brightness: Brightness.dark,
accentColor: Colors.white,
accentIconTheme: IconThemeData(color: Colors.black),
dividerColor: Colors.black12,
scaffoldBackgroundColor: Color(0xFF131313),
),
/* ThemeMode.system to follow system theme,
ThemeMode.light for light theme,
ThemeMode.dark for dark theme */
themeMode: ThemeMode.system,
home: MyHomePage(),
);
}
}
For Customize dark theme
as per your need use darkTheme: ThemeData( use theme properties you need in dark mode)
description:
if dark mode is selected in your system then flutter uses darkTheme property of MaterialApp and if light is selected then flutter uses theme property of MaterialApp, below code shows when you select (try it in your cellphone) dark option in your system then your app will show scaffoldBackgroundColor: Colors.red and if you select light then it will show scaffoldBackgroundColor: Colors.amber
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
darkTheme: ThemeData(brightness: Brightness.dark, scaffoldBackgroundColor: Colors.red),
theme: ThemeData(
scaffoldBackgroundColor: Colors.amber,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
Full code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
darkTheme: ThemeData(brightness: Brightness.dark, scaffoldBackgroundColor: Colors.red),
// themeMode: ThemeMode.dark,
theme: ThemeData(
scaffoldBackgroundColor: Colors.amber,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
// print("brightness ${ColorScheme.}")
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'increment',
style: Theme.of(context).textTheme.headline4,
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
theme: ThemeData.light(), // Provide light theme.
darkTheme: ThemeData.dark(), // Provide dark theme.
themeMode: ThemeMode.system,
//use only these three line for dynamic change theme respect to system theme.
Little late to the party you can implement it without any third party state management using the built-in ValueNotifier.This approach allows you to change the theme of your entire app from any part of the app.
Heres the dartpad demo
Complete code sample
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
final darkNotifier = ValueNotifier<bool>(false);
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ValueListenableBuilder<bool>(
valueListenable: darkNotifier,
builder: (BuildContext context, bool isDark, Widget? child) {
return MaterialApp(
title: 'Flutter Demo',
themeMode: isDark ? ThemeMode.dark : ThemeMode.light,
theme: ThemeData(primaryColor: Colors.blue),
darkTheme: ThemeData.dark(),
home: MyHomePage(
title: 'Homepage',
),
);
});
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void dispose() {
// TODO: implement dispose
darkNotifier.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
bool isDark = darkNotifier.value;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
_darkNotifier.value ? 'DarkMode' : 'LightMode',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
isDark = !isDark;
darkNotifier.value = isDark;
},
tooltip: 'Increment',
child: Icon(isDark ? Icons.wb_sunny_outlined : Icons.bubble_chart),
),
);
}
}
Below is the simple example for changing the theme light to dark
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:theme_mode_switch/notify.dart';
void main() {
runApp(
ChangeNotifierProvider(create: (context) => DarkMode(), child: MyApp()));
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final thmode = Provider.of<DarkMode>(context); ///accessing the variable of provider class
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Dark Mode',
theme: ThemeData(
///here the value of darmode var is updationg by switching
brightness: thmode.darkMode ? Brightness.dark : Brightness.light,
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
final thmode = Provider.of<DarkMode>(context);
return Scaffold(
appBar: AppBar(
title: Text('Dark Mode'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(thmode.darkMode ? 'Dark' :'Light'),
CupertinoSwitch(
value: thmode.darkMode,
onChanged: (bool val) {
thmode.changemode();
},
),
],
),
));
}
}
class DarkMode with ChangeNotifier {
bool darkMode = true; ///by default it is true
///made a method which will execute while switching
changemode() {
darkMode = !darkMode;
notifyListeners(); ///notify the value or update the widget value
}
}
You can also use the available plugin day_night_theme_flutter
A Flutter plugin that helps you to automatically change the theme of the app with sunrise and sunset. Just specify the light and dark theme to use, and you are all set. You can use your custom sunrise and sunset time too.
How to use it?
Add the latest version of the package in your pubspec.yaml
Wrap the MaterialApp with DayNightTheme Widget.
I've found a very nice approach from ITnext where no third-party packages (except for either shared_preferences or hive) are necessary. Here a short summary (without the imports and with a switcher):
// this makes all variables available globally
library config.globals;
// initialize the theme model once
ThemeModel currentTheme = ThemeModel();
// also declare the box
Box? box;
config.dart
class ThemeModel with ChangeNotifier {
// initialize the standard theme here, possible with an elvis to check for the brightness
static bool _isDark = false;
// set a getter just for a more clean approach
bool get isDark => _isDark;
ThemeModel() {
// check for a stored value on initialization
if(box!.containsKey("currentTheme")) {
_isDark = box!.get("currentTheme");
} else {
// if there is no value, apply the standard theme
box!.put("currentTheme", _isDark);
}
}
ThemeMode currentTheme() {
return _isDark ? ThemeMode.dark : ThemeMode.light;
}
void switchTheme() {
// switches the theme by reversing the boolean
_isDark = !_isDark;
// storing the new value
box!.put("currentTheme", _isDark);
// notifies all listeners attached to the theme model
notifyListeners();
}
}
theme_model.dart
void main() async {
// waits for the hive init before running the app
box = await Hive.openBox("theme");
runApp(YourApp());
}
class YourApp extends StatefulWidget {
#override
_YourAppState createState() => _YourAppState();
}
class _YourAppState extends State<YourApp> {
#override
void initState() {
super.initState();
// we are setting a listener to the currentTheme,
// so it gets notified once we toggle it
currentTheme.addListener(() {
setState((){});
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Your title',
theme: ThemeData().light,
darkTheme: ThemeData().dark,
// it will always listen to changes made to currentTheme
themeMode: currentTheme.currentTheme(),
home: HomePage(),
);
}
}
main.dart
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
Switch(
// looking for the current value and sets the switch state
value: currentTheme.isDark,
onChanged: (value) {
setState(() {
// we then set the state to the new current theme
currentTheme.switchTheme();
});
},
),
// this is just a text next to the switch stating the current theme
Text("${currentTheme.currentTheme().toString().split(".")[1]} mode"),
],
);
);
}
}
homepage.dart
You can set the default value to ThemeData.system, if you want to get the users ui preferences. You have to adjust the code to look after the current brightness and then set the theme regarding to the state of it. After that it uses a switch to toggle between dark and light mode.
Example gif
Multiple Flutter themes example (Light and Dark theme)
Add provider in .yaml file
Declare runApp method like this
runApp(ChangeNotifierProvider(
create: (context) => ThemeState(),
child: MyApp(),
));
Create ThemeState class and extend it with ChangeNotitifer
import 'package:flutter/material.dart';
enum ThemeType { DARK, LIGHT }
class ThemeState extends ChangeNotifier {
bool _isDarkTheme = false;
ThemeState() {
getTheme().then((type) {
_isDarkTheme = type == ThemeType.DARK;
notifyListeners();
});
}
ThemeType get theme => _isDarkTheme ? ThemeType.DARK : ThemeType.LIGHT;
set theme(ThemeType type) => setTheme(type);
void setTheme(ThemeType type) async {
_isDarkTheme = type == ThemeType.DARK;
notifyListeners();
}
Future<ThemeType> getTheme() async {
return _isDarkTheme ? ThemeType.DARK : ThemeType.LIGHT;
}
}
In the MyApp class declare this in MaterialApp like this
theme: Provider.of<ThemeState>(context).theme == ThemeType.DARK
? ThemeData(
// Define the default brightness and colors.
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
// Define the default font family.
fontFamily: 'Georgia',
// Define the default `TextTheme`. Use this to specify the default
// text styling for headlines, titles, bodies of text, and more.
textTheme: const TextTheme(
headline1:
TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
headline6:
TextStyle(fontSize: 16.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 10.0, fontFamily: 'Hind'),
),
)
: ThemeData(
// Define the default brightness and colors.
brightness: Brightness.light,
primaryColor: Colors.lightGreen[300],
// Define the default font family.
fontFamily: 'Georgia',
// Define the default `TextTheme`. Use this to specify the default
// text styling for headlines, titles, bodies of text, and more.
textTheme: const TextTheme(
headline1:
TextStyle(fontSize: 32.0, fontWeight: FontWeight.normal),
headline6:
TextStyle(fontSize: 16.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 10.0, fontFamily: 'Hind'),
),
),
much easier than you think with get package
return GetMaterialApp(
themeMode: lightOrDark?ThemeMode.light:ThemeMode.dark,
...
);

multi Provider doesn't work in material app in flutter?

I've created an app and I have used MultiProvider but it doesn't work when I use it inside MaterialApp
I want to use it to change app theme color but
it gives me an error:
*Note: when I use posts provider in any other screen it works.
My Code:
import 'package:blog_app/provider/posts.dart';
import 'package:blog_app/provider/settings.dart';
import 'package:blog_app/screens/splash_screen.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<Posts>(
builder: (context) => Posts(),
),
ChangeNotifierProvider<Settings>(
builder: (context) => Settings(),
),
],
child: MaterialApp(
darkTheme: Provider.of<Settings>(context).darkModeEnabled ? ThemeData.dark() : ThemeData.light(),
debugShowCheckedModeBanner: false,
title: 'Blogy',
theme: ThemeData(
primaryColor: Colors.deepPurple[900],
cursorColor: Colors.deepPurple[900],
accentColor: Colors.deepPurple[900],
fontFamily: 'Ubuntu',
),
home: SplashScreen(),
),
);
}
}
The Error :-
I/flutter ( 9316): The following ProviderNotFoundError was thrown building MyApp(dirty):
I/flutter ( 9316): Error: Could not find the correct Provider<Settings> above this MyApp Widget
I/flutter ( 9316):
I/flutter ( 9316): To fix, please:
I/flutter ( 9316):
I/flutter ( 9316): * Ensure the Provider<Settings> is an ancestor to this MyApp Widget
I/flutter ( 9316): * Provide types to Provider<Settings>
I/flutter ( 9316): * Provide types to Consumer<Settings>
I/flutter ( 9316): * Provide types to Provider.of<Settings>()
The following test code work without error, you can test with your case
Use Consumer to wrap MaterialApp
code snippet
return MultiProvider(
providers: [
ChangeNotifierProvider<Posts>(
create: (context) => Posts(),
),
ChangeNotifierProvider<Settings>(
create: (context) => Settings(darkModeEnabled: true),
),
],
child: Consumer<Settings>(builder: (_, settings, child) {
return MaterialApp(
darkTheme:
settings.darkModeEnabled ? ThemeData.dark() : ThemeData.light(),
debugShowCheckedModeBanner: false,
title: 'Blogy',
theme: ThemeData(
primaryColor: Colors.deepPurple[900],
cursorColor: Colors.deepPurple[900],
accentColor: Colors.deepPurple[900],
fontFamily: 'Ubuntu',
),
home: SplashScreen(),
);
}),
);
full test code
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class Posts extends ChangeNotifier {}
class Settings extends ChangeNotifier {
bool darkModeEnabled;
Settings({this.darkModeEnabled});
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<Posts>(
create: (context) => Posts(),
),
ChangeNotifierProvider<Settings>(
create: (context) => Settings(darkModeEnabled: true),
),
],
child: Consumer<Settings>(builder: (_, settings, child) {
return MaterialApp(
darkTheme:
settings.darkModeEnabled ? ThemeData.dark() : ThemeData.light(),
debugShowCheckedModeBanner: false,
title: 'Blogy',
theme: ThemeData(
primaryColor: Colors.deepPurple[900],
cursorColor: Colors.deepPurple[900],
accentColor: Colors.deepPurple[900],
fontFamily: 'Ubuntu',
),
home: SplashScreen(),
);
}),
);
}
}
class SplashScreen extends StatefulWidget {
SplashScreen({Key key}) : super(key: key);
//final String title;
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("test"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
This error happens because you are creating your providers and your consumers in the same build method. This results in them having the same context, which doesn't have any Provider<Settings> registered yet. Provider.of<Settings>(context) is trying to find a Provider<Settings> above in the widget tree, but there is no such provider there.
Using Consumer seems like a valid workaround, but recreating the whole MaterialApp on every change might be pretty heavy.
I suggest instead creating separate widgets for providers and the app root:
class AppProviders extends StatelessWidget {
final Widget child;
AppProviders({this.child});
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<Posts>(
builder: (context) => Posts(),
),
ChangeNotifierProvider<Settings>(
builder: (context) => Settings(),
),
],
child: child;
);
}
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
darkTheme: Provider.of<Settings>(context).darkModeEnabled ? ThemeData.dark() :
ThemeData.light(),
debugShowCheckedModeBanner: false,
title: 'Blogy',
theme: ThemeData(
primaryColor: Colors.deepPurple[900],
cursorColor: Colors.deepPurple[900],
accentColor: Colors.deepPurple[900],
fontFamily: 'Ubuntu',
),
home: SplashScreen(),
);
}
}
Then wrap the MyApp widget in AppProviders inside the runApp function.
void main() {
runApp(
AppProviders(
child: MyApp(),
)
);
}
This ensures that the Providers are registered above your root app widget and that they are visible in its context.
Alternatively you can declare three widgets where the third one is just AppProviders(child: MyApp()) and call that one in runApp. Note that creating AppProviders inside MyApp's build method will result in the same error as before, so don't try it that way.

This is likely a mistake, as Provider will not automatically update dependents

whenever I add the provider to the MultipleProvider it just shows this weird error not not able to solve it after spending 4 hours.
main.dart
MultiProvider(
providers: [
Provider<HandleImageSelectionModel>(
create: (_) => HandleImageSelectionModel()),
],
child: MaterialApp(
title: 'Flutter Demo',
initialRoute: '/',
onGenerateRoute: RouteGenerator.generateRoute,
theme: ThemeData(
primarySwatch: Colors.blue,
),
),
);
Provider class
import 'package:flutter/foundation.dart';
class HandleImageSelectionModel extends ChangeNotifier {
bool isSelectionModeEnabled = false;
HandleImageSelectionModel();
toggleSelectionMode() {
isSelectionModeEnabled = !isSelectionModeEnabled;
notifyListeners();
}
}
Changing State
Provider.of<HandleImageSelectionModel>(context)
.toggleSelectionMode();
Trying to consume here
Consumer<HandleImageSelectionModel>(
builder: (context, isEnabled, child) {
print(isEnabled);
return Positioned(
child: Align(
alignment: Alignment.topRight,
child: CircularCheckBox(
value: true,
materialTapTargetSize:
MaterialTapTargetSize.padded,
onChanged: (bool x) {}),
),
);
},
)
You're using Provider when the class you pass is a ChangeNotifier.
Use ChangeNotifierProvider instead:
ChangeNotifierProxyProvider<HandleImageSelectionModel>