Flutter Switch Themes with Provider

 Flutter Themes With Provider

Hi Coders,

Welcome back,

Have you ever used themes in your App because now a days almost every app comes with Themes switch function(Light Theme and Dark Theme) and as a Mobile Application Developer you must know how it works and How to implement this in our app.

If you are looking for video then check out my YouTube Channel
So Here i am gonna use Provider for theme switch and the reason behind this is I hate Provider But as a state management But when its about changing theme then Provider is the best So now let's see how it will work

Step  1: Add Provider to Pubspec.yaml file 

Step 2: Create a new file named themes.dart for themes structure i.e here you can define what and how you want to show your data and UI when themes changing.

	import 'package:flutter/material.dart';
	class AppTheme {
	AppTheme._();
	static final ThemeData lightTheme = ThemeData(
	scaffoldBackgroundColor: Colors.teal,
	appBarTheme: const AppBarTheme(
	color: Colors.teal,
	iconTheme: IconThemeData(color: Colors.white),
	),
	colorScheme: const ColorScheme.light(
	primary: Colors.white, onPrimary: Colors.white, secondary: Colors.red),
	cardTheme: const CardTheme(color: Colors.teal),
	iconTheme: const IconThemeData(color: Colors.white),
	textTheme: const TextTheme(
	titleLarge: TextStyle(color: Colors.white, fontSize: 20.0),
	titleSmall: TextStyle(color: Colors.white, fontSize: 15.0)),
	);
	static final ThemeData darkTheme = ThemeData(
	scaffoldBackgroundColor: Colors.black,
	appBarTheme: const AppBarTheme(
	color: Colors.black,
	iconTheme: IconThemeData(
	color: Colors.white,
	),
	),
	colorScheme: const ColorScheme.light(
	primary: Colors.black,
	onPrimary: Colors.black,
	secondary: Colors.red,
	),
	cardTheme: const CardTheme(
	color: Colors.black,
	),
	iconTheme: const IconThemeData(
	color: Colors.white54,
	),
	textTheme: const TextTheme(
	titleLarge: TextStyle(
	color: Colors.white,
	fontSize: 20.0,
	),
	titleSmall: TextStyle(
	color: Colors.white70,
	fontSize: 18.0,
	),
	),
	);
	}

view raw themes.dart hosted with ❤ by GitHub

Step 3: Create theme_provider.dart file to manage the state of theme around the app

	import 'package:flutter/material.dart';
	class ThemeProvider extends ChangeNotifier {
	bool isDark = false;
	changeTheme() {
	isDark = !isDark;
	notifyListeners();
	}
	}

view raw theme_provider.dart hosted with ❤ by GitHub

Step 4: Initialize provider in main.dart file

	import 'package:flutter/material.dart';
	import 'package:khata_app/app/provider/theme_provider.dart';
	import 'package:khata_app/app/theme/themes.dart';
	import 'package:khata_app/app/ui/home_screen.dart';
	import 'package:provider/provider.dart';
	void main() {
	runApp(const MyApp());
	}
	class MyApp extends StatelessWidget {
	const MyApp({super.key});
	@override
	Widget build(BuildContext context) {
	return ChangeNotifierProvider(
	create: (_) => ThemeProvider(),
	child: Consumer(
	builder:
	(BuildContext ctx, ThemeProvider themeProvider, Widget? child) {
	return MaterialApp(
	title: 'Codemicros',
	theme: themeProvider.isDark
	? AppThemes.darkTheme
	: AppThemes.lightTheme,
	home: const HomeScreen(),
	);
	},
	),
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

Step 5: Change theme with switch button

	Switch(
	value:
	Provider.of<ThemeProvider>(context).isDark,
	onChanged: (value) {
	Provider.of<ThemeProvider>(context,
	listen: false)
	.changeTheme();
	})

view raw switch_theme.dart hosted with ❤ by GitHub