![\"create](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2023\/02\/create-a-flutter-custom-theme.webp\")
create a flutter custom theme<\/p><\/div>\n
Step-by-Step Guide for Flutter Theming with Custom Color<\/h2>\n
To successfully implement Flutter theming, you will have to take care of the following prerequisites:<\/p>\n
- \n
- Create flutter project<\/li>\n
- Add riverpod package in yaml (Note: You can use any state management packages base on your convenient)<\/li>\n<\/ul>\n
Once you are ready to go ahead, execute the following steps consecutively for enabling custom Flutter theming.<\/p>\n
Want to Implement a custom option to change the theme dynamically in your app?<\/span>
\nHire Flutter Developers<\/a> from Bacancy to add or customize theme Color for your app branding<\/strong><\/i><\/p>\nStep 1: Create Light\/Dark Theme<\/h3>\n
For creating a theme for light and dark mode, we use ThemeData class and customize colors and other properties based on needs. We have created one method for getting ThemeDate based on selected light\/dark themes.<\/p>\n
We give different values for scaffoldBackgroundColor, bodyColor, thumbColor, listTileTheme, and appBarTheme based on the selected theme.<\/p>\n
ThemeData getAppTheme(BuildContext context, bool isDarkTheme) {\r\n return ThemeData(\r\n scaffoldBackgroundColor: isDarkTheme ? Colors.black : Colors.white,\r\n textTheme: Theme.of(context)\r\n .textTheme\r\n .copyWith(\r\n titleSmall:\r\n Theme.of(context).textTheme.titleSmall?.copyWith(fontSize: 11),\r\n )\r\n .apply(\r\n bodyColor: isDarkTheme ? Colors.white : Colors.black,\r\n displayColor: Colors.grey,\r\n ),\r\n switchTheme: SwitchThemeData(\r\n thumbColor: MaterialStateProperty.all(\r\n isDarkTheme ? Colors.orange : Colors.purple),\r\n ),\r\n listTileTheme: ListTileThemeData(\r\n iconColor: isDarkTheme ? Colors.orange : Colors.purple),\r\n appBarTheme: AppBarTheme(\r\n backgroundColor: isDarkTheme ? Colors.black : Colors.white,\r\n iconTheme:\r\n IconThemeData(color: isDarkTheme ? Colors.white : Colors.black54)),\r\n );\r\n}<\/pre>\nStep 2: Create Provider for Theme State Using River-pod<\/h3>\n
We will use river-pod to manage the app theme state. We only want to store bool value to manage light or dark themes so we will use StateProvider.<\/p>\n
![\"StateProvider\"](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2023\/02\/StateProvider.webp\")
StateProvider<\/p><\/div>\n
Step 3: Use Theme in App<\/h3>\n
We use river-pod in the project so we have to wrap MyApp with ProviderScope to access all providers though-out app. MyApp extends ConsumerWidget so we can get the WidgetRef object in the build method and access any river-pod using the ref variable. getAppTheme(context, ref.watch(appThemeProvider))<\/strong> method listens to any change in the app theme and updates the app accordingly.<\/p>\n
class MyApp extends ConsumerWidget {\r\n const MyApp({super.key});\r\n\r\n @override\r\n Widget build(BuildContext context, WidgetRef ref) {\r\n return MaterialApp(\r\n title: 'Flutter Light\/Dark Theme',\r\n debugShowCheckedModeBanner: false,\r\n theme: getAppTheme(context, ref.watch(appThemeProvider)),\r\n home: const MyHomePage(),\r\n );\r\n }\r\n}<\/pre>\nref.read(appThemeProvider.notifier).state = value<\/strong>. We are updating the theme state in appThemeProvider when the switch state is changed from light\/dark mood.<\/p>\n
Switch(\r\n activeColor: Colors.orange,\r\n onChanged: (value) {\r\n ref.read(appThemeProvider.notifier).state = value;\r\n },\r\n value: isDarkMode )<\/pre>\nStep 4: Add Custom Color<\/h3>\n
It works fine as far as it will show the same color in all icons and texts. If we want to use different colors on icons, we have to create an extension for the Theme. Create a class and extend with ThemeExtension and add necessary fields that you want to customize.<\/p>\n
![\"Add](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2023\/02\/Add-custom-color.webp\")
Add custom color<\/p><\/div>\n
Now add this extension attribute in ThemeData in our create method getAppTheme and define the theme according to colors.<\/p>\n
![\"add](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2023\/02\/add-extension-attribute-in-ThemeData.webp\")
add extension attribute in ThemeData<\/p><\/div>\n
Create another extension function which we use to access custom color easily.<\/p>\n
![\"extension](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2023\/02\/extension-function.webp\")
extension function<\/p><\/div>\n
We can access these colors in the widget simply using colors(context).color1<\/strong>. If we do not specify the Icon color, it will fetch the color from listTileTheme.<\/p>\n
ListTile(\r\n leading: Icon(Icons.chat_outlined, color: colors(context).color3),\r\n title: Text( \"Help Center\", style: Theme.of(context).textTheme.titleSmall),\r\n ),\r\nListTile(\r\n leading: const Icon(Icons.notifications),\r\n title: Text(\"Notification\", style: Theme.of(context).textTheme.titleSmall),\r\n),<\/pre>\n
Step 5: Full Source Code<\/h3>\n
Here is the code for theme class:<\/p>\n
![\"Full](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2023\/02\/Full-source-code.webp\")
Full source code<\/p><\/div>\n
Here is code of our main screen:<\/p>\n
import 'package:flutter\/material.dart';\r\nimport 'package:flutter_riverpod\/flutter_riverpod.dart';\r\nimport 'package:light_dark_mode\/provider%20\/app_theme_provider.dart';\r\nimport 'package:light_dark_mode\/utils\/app_theme.dart';\r\n\r\nvoid main() {\r\n runApp(const ProviderScope(child: MyApp()));\r\n}\r\n\r\nclass MyApp extends ConsumerWidget {\r\n const MyApp({super.key});\r\n\r\n @override\r\n Widget build(BuildContext context, WidgetRef ref) {\r\n return MaterialApp(\r\n title: 'Flutter Light\/Dark Theme',\r\n debugShowCheckedModeBanner: false,\r\n theme: getAppTheme(context, ref.watch(appThemeProvider)),\r\n home: const MyHomePage(),\r\n );\r\n }\r\n}\r\n\r\nclass MyHomePage extends ConsumerWidget {\r\n const MyHomePage({Key? key}) : super(key: key);\r\n\r\n @override\r\n Widget build(BuildContext context, WidgetRef ref) {\r\n var isDarkMode = ref.watch(appThemeProvider);\r\n return Scaffold(\r\n appBar: AppBar(\r\n elevation: 0,\r\n leading: const Icon(Icons.arrow_back_ios_sharp),\r\n actions: const [\r\n Padding(\r\n padding: EdgeInsets.symmetric(horizontal: 15.0),\r\n child: Icon(Icons.add_circle_outline),\r\n )\r\n ],\r\n ),\r\n body: Padding(\r\n padding: const EdgeInsets.symmetric(horizontal: 8.0),\r\n child: ListView(\r\n children: [\r\n CircleAvatar(\r\n radius: 60,\r\n backgroundColor: Colors.grey,\r\n child: Padding(\r\n padding: const EdgeInsets.all(1), \/\/ Border radius\r\n child: ClipRRect(\r\n borderRadius: BorderRadius.circular(60),\r\n child: Image.asset(\r\n \"assets\/ic_profile.jpeg\",\r\n fit: BoxFit.fill,\r\n width: 120,\r\n height: 120,\r\n )),\r\n ),\r\n ),\r\n Container(\r\n margin: const EdgeInsets.only(top: 10, bottom: 60),\r\n alignment: Alignment.center,\r\n child: Text(\r\n \"Testing User\",\r\n style: Theme.of(context).textTheme.titleLarge,\r\n ),\r\n ),\r\n ListTile(\r\n leading: Icon(isDarkMode ? Icons.brightness_3 : Icons.sunny),\r\n title: Text(\r\n isDarkMode ? \"Dark mode\" : \"Light mode\",\r\n style: Theme.of(context).textTheme.titleSmall,\r\n ),\r\n trailing: Consumer(builder: (context, ref, child) {\r\n return Transform.scale(\r\n scale: 0.7,\r\n child: Switch(\r\n activeColor: Colors.orange,\r\n onChanged: (value) {\r\n ref.read(appThemeProvider.notifier).state = value;\r\n },\r\n value: isDarkMode,\r\n ),\r\n );\r\n }),\r\n ),\r\n ListTile(\r\n leading: Icon(Icons.grid_on_sharp, color: colors(context).color1,),\r\n title: Text(\r\n \"Story\",\r\n style: Theme.of(context).textTheme.titleSmall,\r\n ),\r\n ),\r\n ListTile(\r\n leading: Icon(Icons.settings, color: colors(context).color2),\r\n title: Text(\"Settings and Privacy\",\r\n style: Theme.of(context).textTheme.titleSmall),\r\n ),\r\n ListTile(\r\n leading: Icon(Icons.chat_outlined, color: colors(context).color3),\r\n title: Text(\r\n \"Help Center\",\r\n style: Theme.of(context).textTheme.titleSmall,\r\n ),\r\n ),\r\n ListTile(\r\n leading: const Icon(Icons.notifications),\r\n title: Text(\r\n \"Notification\",\r\n style: Theme.of(context).textTheme.titleSmall,\r\n ),\r\n ),\r\n ],\r\n ),\r\n ),\r\n );\r\n }\r\n}<\/pre>\nYou can find full code here: GitHub Repository<\/a>.<\/p>\n
Conclusion<\/h2>\n