Flutter Dynamic Theming - dart

Question

What is the best way to go about dynamically changing the theme of a Flutter app? For example, if the user changes the color to red, I want the theme to instantly be changed to red. I can't find anything very helpful online except one guy said to use the BLOC pattern, which I am not familiar with it. I'd like to hear your guys thoughts on the issue. Thanks!
My current code structure:
var themeData = ThemeData(
fontFamily: 'Raleway',
primaryColor: Colors.blue,
brightness: Brightness.light,
backgroundColor: Colors.white,
accentColor: Colors.blue);
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: Constants.appName,
theme: themeData,
home: CheckAuth(), //CheckAuth returns MyHomePage usually
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title, #required this.uid}) : super(key: key);
final String title;
final String uid;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
...build and stuff
}

Answer 1

You can use InhertedWidget if you like (instead of BLOC) - Basically it is used to access parent widget anywhere from the tree.
So what you should do is
create InheritedWidget, somewhere in top of tree [from where you want the effect of theme to take place]
wrap it around Theme widget
expose a method to switch theme, by passing the ThemeData you want to replace it with.
Here is some code:
import 'package:flutter/material.dart';
var themeData = ThemeData(
fontFamily: 'Raleway',
primaryColor: Colors.blue,
brightness: Brightness.light,
backgroundColor: Colors.white,
accentColor: Colors.blue
);
void main() {
runApp(
ThemeSwitcherWidget(
initialTheme: themeData,
child: MyApp(),
),
);
}
class ThemeSwitcher extends InheritedWidget {
final _ThemeSwitcherWidgetState data;
const ThemeSwitcher({
Key key,
#required this.data,
#required Widget child,
}) : assert(child != null),
super(key: key, child: child);
static _ThemeSwitcherWidgetState of(BuildContext context) {
return (context. dependOnInheritedWidgetOfExactType(ThemeSwitcher)
as ThemeSwitcher)
.data;
}
#override
bool updateShouldNotify(ThemeSwitcher old) {
return this != old;
}
}
class ThemeSwitcherWidget extends StatefulWidget {
final ThemeData initialTheme;
final Widget child;
ThemeSwitcherWidget({Key key, this.initialTheme, this.child})
: assert(initialTheme != null),
assert(child != null),
super(key: key);
#override
_ThemeSwitcherWidgetState createState() => _ThemeSwitcherWidgetState();
}
class _ThemeSwitcherWidgetState extends State<ThemeSwitcherWidget> {
ThemeData themeData;
void switchTheme(ThemeData theme) {
setState(() {
themeData = theme;
});
}
#override
Widget build(BuildContext context) {
themeData = themeData ?? widget.initialTheme;
return ThemeSwitcher(
data: this,
child: widget.child,
);
}
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeSwitcher.of(context).themeData,
home: CheckAuth(),
);
}
}
I have wrapped ThemeSwitcherWidget around MaterialApp so the effect is throughout the app (even when you push new route with Navigator).
Use ThemeSwitcher.of(context).switchTheme(themeData) anywhere below ThemeSwithcerWidget to change the theme.
In question's case it should call ThemeSwitcher.of(context).switchTheme(Theme.of(context).copyWith(primaryColor: Colors.red)) to switch primary color to red throught out the app, for eg. on some button click
EDIT: replaced inheritFromWidgetOfExactType -> dependOnInheritedWidgetOfExactType, since it is deprecated - as pointed by Phoca in comments.

Answer 2

Using provider package:
theme_changer.dart
var darkTheme = ThemeData.dark();
var lightTheme= ThemeData.light();
class ThemeChanger extends ChangeNotifier {
ThemeData _themeData;
ThemeChanger(this._themeData);
get getTheme => _themeData;
void setTheme(ThemeData theme) {
_themeData = theme;
notifyListeners();
}
}
main.dart
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => ThemeChanger(lightTheme)),
],
child: MaterialAppWithTheme(),
);
}
}
class MaterialAppWithTheme extends StatelessWidget {
#override
Widget build(BuildContext context) {
final theme = Provider.of<ThemeChanger>(context);
return MaterialApp(
theme: theme.getTheme,
home: FirstScreen(),
);
}
first_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import './theme_changer.dart'
class FirstScreen extends StatelessWidget{
#override
Widget build(BuildContext context){
var _themeProvider=Provider.of<ThemeChanger>(context);
return Scaffold(
appBar: AppBar(title:Text("First Screen"),),
body:Container(width:MediaQuery.of(context).size.width,
height:MediaQuery.of(context).size.height,
child:Center(
child:FlatButton(child:Text("Press me"). onPressed:(){
_themeProvider.setTheme(_themeProvider.getTheme==lightTheme?darkTheme:lightTheme);
})
),
),
);
}
}

Answer 3

This is how to implement the dynamic Theme changing in Your App:
1.You should Change your MyApp into Stateful widget to enable the class to rebuild again when the color changes:
var _primary = Colors.blue ; // This will hold the value of the app main color
var themeData = ThemeData(
fontFamily: 'Raleway',
primaryColor: _primary, // so when the rebuilds the color changes take effect
brightness: Brightness.light,
backgroundColor: Colors.white,
accentColor: Colors.blue);
void main() => runApp(new App());
class App extends StatefulWidget {
App({Key key,}) :
super(key: key);
#override
_AppState createState() => new _AppState();
static void setTheme(BuildContext context, Color newColor) {
_AppState state = context.ancestorStateOfType(TypeMatcher<_AppState>());
state.setState(() {
state._primary = newColor;
});
}
}
2.The static method setTheme will be the one responsible for color changing :
class _AppState extends State<App> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: Constants.appName,
theme: themeData,
home: CheckAuth(), //CheckAuth returns MyHomePage usually
);
}
}
3.When You want to change the theme color from anywhere from your code call this method:
App.setTheme(context, Colors.blue);

Answer 4

You can change the theme using setState or ValueListenableBuilder dynamically without any extension.
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
title: 'Flutter Basics',
home: StartScreen(),
));
}
class StartScreen extends StatefulWidget {
const StartScreen({Key? key}) : super(key: key);
#override
State<StartScreen> createState() => _StartScreenState();
}
class _StartScreenState extends State<StartScreen> {
#override
Widget build(BuildContext context) {
final notifier = ValueNotifier(ThemeController.type);
return ValueListenableBuilder(
valueListenable: notifier,
builder: (BuildContext context, ThemeType value, Widget? child) {
print(value.name);
return Theme(
data: ThemeController.data,
child: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
setState(() {
int i = (value.index + 1) % ThemeType.values.length;
ThemeController.select(ThemeType.values[i]);
});
},
child: const Text('Change Theme(setState)'),
),
ElevatedButton(
onPressed: () {
int i = (value.index + 1) % ThemeType.values.length;
ThemeController.select(ThemeType.values[i]);
notifier.value = ThemeController.type;
},
child: const Text('Change Theme(Notifier)'),
),
],
),
)),
);
},
);
}
}
enum ThemeType {
dark,
light,
system,
}
class ThemeController {
static ThemeType _type = ThemeType.system;
static ThemeType get type => _type;
static ThemeData _themeData = _getData(ThemeType.system);
static ThemeData get data => _themeData;
static ThemeData select(ThemeType type) {
_type = type;
_themeData = _getData(type);
return _themeData;
}
static ThemeData _getData(ThemeType themeType) {
Brightness brightness = WidgetsBinding.instance.window.platformBrightness;
ThemeType type = themeType == ThemeType.system
? ThemeType.values[brightness.index]
: themeType;
switch (type) {
case ThemeType.dark:
return ThemeData.dark();
case ThemeType.light:
return ThemeData.light();
default:
return _themeData;
}
}
}

Answer 5

An easy approach (to me) is to achieve this is to make use of Stream with InheritedWidget.
The basic idea is to use an InheritedWidget with a StreamController, and wrap your MaterialApp (or a subtree of your app) with a StreamBuilder which gets the Stream from the StreamController from the InheritedWidget.
A complete tested working code sample as follows:
import 'dart:async';
import 'package:flutter/material.dart';
ThemeData darkTheme = ThemeData(
colorSchemeSeed: Colors.amber,
brightness: Brightness.dark,
);
ThemeData lightTheme = ThemeData(
colorSchemeSeed: Colors.blue,
brightness: Brightness.light,
);
void main() {
runApp(
CustomTheme(
child: const MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return StreamBuilder<ThemeData>(
initialData: lightTheme,
stream: CustomTheme.of(context)!.streamController.stream,
builder: (context, snapshot) => MaterialApp(
theme: snapshot.data,
home: const HomeScreen(),
),
);
}
}
class CustomTheme extends InheritedWidget {
CustomTheme({Key? key, required this.child}) : super(key: key, child: child);
final Widget child;
final StreamController<ThemeData> streamController = StreamController();
static CustomTheme? of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<CustomTheme>();
}
#override
bool updateShouldNotify(CustomTheme oldWidget) {
return oldWidget != this;
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
CustomTheme customTheme = CustomTheme.of(context)!;
return Scaffold(
appBar: AppBar(
title: const Text('Custom Theme Demo'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ElevatedButton(
onPressed: () {
customTheme.streamController.add(darkTheme);
},
child: const Text('DARK'),
),
ElevatedButton(
onPressed: () {
customTheme.streamController.add(lightTheme);
},
child: const Text('LIGHT'),
),
],
),
),
);
}
}

Answer 6

I have used get plugin and used Get.changeThemeMode(ThemeMode.(dark/system/light)); it works perfectly for me
First u have to add the get plugin by following the installing guide
then in main change
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Add Your Title',
debugShowCheckedModeBanner: false,
theme:_lightTheme,
darkTheme: _darkTheme,
home: login(),
);
}
}
ON Tap function
import 'package:get/get.dart';
onTap: () {
Get.changeThemeMode(ThemeMode.dark);
setState(() async {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (BuildContext context) => super.widget));
});
}
I have two button for both themes and onTap i have just add the line
Get.changeThemeMode(ThemeMode.dark) for dark mode ,
Get.changeThemeMode(ThemeMode.dark) for light mode