Switching themes in Flutter apps like a fox!
Flutter framework has been continuously developed since it has been first introduced and now it has gained a huge developer base and developers are really loving to work in it.
Why Theme Switching?
Dynamic Themes are nowadays very common feature in many of the real-world apps and it also gives a good User Experience. The users are now given preference to change the themes according to their choice based on the ambiance of light. Yeah! you’ve heard right, the ambiance of light also matters for good user experience. Like dark mode is best suitable for low-lit ambiances.
Giving customization to the user according to ambiances gives relief to the eyes of the user and takes it to the comfort zone. This helps the user to enjoy and experience the app in a better way. But, this can be painful sometimes to manage the dynamic themes throughout the app.
Previously I had published an article on “Dynamic Theme in Flutter using BLoC” and that article is giving a good impact in the community. In this article, I have explained an approach to achieve a dynamic theme in Flutter using its state management strategy BLoC.
This time I would like to explain an approach to flawlessly manage the themes across the app. You can manage a lot of properties and attributes of the widgets in your Flutter application. Along with just normal light and dark theme switching, I will also implement some more complex theme switching which can be a really great UX for the app.
In this article, we will be using a flutter package named dynamic_theme. Thanks to Norbert for this wonderful package. This package allows us the switching of themes in Flutter apps.
The main aim of this article is not just to switch the themes, instead, we will be managing the themes throughout the app in a flawless manner. It sounds interesting. Isn’t it?
So, first of all, I will be adding the package dependency in my pubspec.yaml file in my Flutter app. Now, we will follow a step-by-step process for integrating complex theme switching in Flutter apps.
1. Using DynamicTheme as root widget.
Now, for using this dynamic theming throughout the app, we will have to wrap our MaterialApp widget inside the DynamicTheme widget so that we can apply the dynamic theme throughout the app.
Here, I’ve wrapped the MaterialApp widget inside a DynamicTheme widget using a property called themedWidgetBuilder which is a function and it returns a MaterialApp widget. Here’s another important property of DynamicTheme widget named data which will be used to switch and assign the ThemeData throughout the app.
2. Creating custom themes.
For accessing the themes throughout the app, we will create a separate file in which we will keep all the theme-related data. In our app, we will be using four themes (two of light and two or right). For that, the data will be kept in the below manner.
3. Creating a widget for the theme switch.
Now, after creating this file and defining the ThemeData for each theme, we will create a home_page and a widget that will allow the user to switch between the themes. In our case, it will be a DropdownMenu which will be displayed on the AppBar().
Here we will have to define a variable in the class which will populate my theme items from the predefined ThemeItem class. The code written below will generate the theme data for me:
4. Handling the change.
Now, after having my data with me, I will be handling the change in DropdownMenu using its onChange property which expects a function and we’ve already referred a function which is to be implemented yet.
Here, the method onChangeDropdownItem will be executed whenever the DropdownMenuItem is clicked and it internally calls the methods changeColor() and setSharedPrefs(). The method changeColor() is used to change the ThemeData globally on the go and setSharedPrefs() is used to set the settings as shared preferences for further usage.
5. Accessing and handling shared preferences.
Now, after this setup for theme changing done, we will access the shared preferences and working on the themes in DynamicTheme() widget which is defined in main.dart file. Here’s the code for main.dart file:
Here first we are fetching the theme from inside the getDefault() method using SharedPreferences. After that, inside the data property of DynamicTheme widget we are returning the appropriate ThemeData based on the preferences saved by the user.
6. Accessing the dynamic theme data throughout the app.
Now, after all these, we are done with the setup of the dynamic theme. Finally, we are just required to access the ThemeData inside our widgets which will be dynamically changed throughout the app. For that we will be using the following line:
DynamicTheme.of(context).data -> This line will allow us to access the theme data which is dynamically changing.
The below code is an example usage of the above code in UI. The below code is the body of Scaffold which is defined inside home_page.dart
Here it is evident that we are frequently using the DynamicTheme class and the data property for accessing the ThemeData which will be frequently used to maintain the uniformity in UI of the application. Here, we have implemented a complex theme switching in which we are not just changing the brightness instead we are also switching the colors and other properties according to the user’s preference.
For demo purposes, I have just used 4 themes which can be easily extended to more and more themes and this will give a lot of options to the users for switching the themes according to them.
This implementation can be easily applied to an existing app as well and can be used in the app at any scale. To increase the User Experience, many real-world are implementing the theme switch and I wish you all the best to do so in your app.
Closing Steps
Ohh, you are still reading this. Thanks for your patience in reading this article.
Good User Experience is one of the most prior things for any app developer and the evolution of UI/UX is a must activity for any app. The theme switching can be the next step for updating your app. I hope I was able to deliver something new in this article about Dynamic theme switching in Flutter.
Special Thanks to Siddharth Ajmera for helping me out in this article. Share this article with your contacts and who are eager to learn something new in Flutter. And don’t forget to clap this if you liked the article. Keep Fluttering:)
Full code for this article is present in the GitHub repo: https://github.com/ritesh-sharma33/Playing-With-Dynamic-Theme-Like-A-Pro
