Multi Theme Using Provider in Flutter

Themes have always been an Omnipotent part of User Interface for app developers. With the recent key advancements in app developing process, Customisation in themes is an apparent need of developers.

Flutter has although to a whopping extent ease off the process of customising themes & their individual components. Here, In this article we are going to create Multi themes using provider state management technique :

For Beginner’s, Do Checkout this video of Google I/O’19 For Dark Theme:

Dark themes have been introduced in flutter which is easily applicable by either through the app settings or phone settings. Dark themes are a hot buzz nowadays as it reduces the luminous emission through screens which-in-turn helps in reducing the blue ray emitted by devices preventing eye strain, adjusting brightness to current lighting conditions, and facilitating righteous screen use in dark environments — also longevity of battery life.

This article assumes you have Pre-requisite knowledge about Inherited Widgets. If you don’t know about Inherited Widget, these are some interesting articles about them, for example here -

Let’s Begin:

1. Firstly, Create a new project and then clear all the code in the main.dart file. Type below command in your terminal:-

flutter create yourProjectName

Add the current latest version of provider package under the dependencies in pubspec.yaml file.

dependencies:  
provider: ^4.0.2

1. Have a look at the snippet for better understanding:

As we can infer from the above snippet:

Multiprovider state management has been used for the state management in with its child as MyApp().Provider consist of ChangeNotifierProvider in which non-null create a ChangeNotifier which is automatically disposed up on its removal from widget tree.

In Class MyApp(), Consumer is used which Obtains Provider from its ancestors and passes its value to the builder.Also, In MaterialApp routes and ThemeData elements are provided using model class.

Create Theme:

We can create multiple themes as referring to our needs via the help of panache ( a flutter theme editor). Themes once created, we create a ThemeModel class to notify us of a theme change through with the help of notifylisteners each time a change is occurring so that it will notify them to its descendants:

setAccentTempShadeColor(Color value) {
  _accentTempShadeColor = value;
  notifyListeners();
}

Here, both option have been availed —

One involving Change of Primary maincolor from the Multi theme option and other giving some custom changes which can be made by picking the appropriate shadecolor from the colorpicker .Though here , I have restrained myself for only some custom changes but the list is growable as we have multiple attributes which can be changed up in MaterialApp.

Custom & Main Option:-

All the attributes can be mutated by selectively choosing the shadecolor from the colorpicker in the custom tab whereas the generic option will apparently change the primary main colour On-tapping the right container, tapping is made sure of with a display of Toast.

Using a Custom Font Family:

A discrete directory named fonts with font-family Gilroy has been added that is further defined in pubspec.yaml as-

fonts:
  - family: GilroySemiBold
    fonts:
      - asset: fonts/gilroy.otf

which can be applied to textstyle for custom fonts also:

style: TextStyle( fontFamily: 'GilroySemiBold'),

you can also pass it in the main file so that it may be the Default font of your app.

That’s it. With just a few lines of code, we can dynamically change the theme of our app. Let’s see what it looks like:

Check out the whole code and a motion gif here:

flutter-devs/flutter_multitheme_demo

A flutter App showing the use of multi theme in flutter. - flutter-devs/flutter_multitheme_demo
github.com

Also, Check the module used in the blog from here.

Closing Thoughts

Themes are a Quintessential tool in modern applications as they provide us with the ease of customising User-Interface of the app as per user needs. They also provide the app it’s fondness and customizability as per particular needs. The key purpose of this article is to avail you an Insight of How we can create multiple themes based flutter application using Provider State management technique.

If you have not used Themes, I hope this article has provided you with content information about what’s all about Multi-theme, and you will give it — a Try. Initiate using Themes for your apps. !!!

Feel free to connect with us:

And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, and Twitter for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #Flutter. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!

Thank you for reading. 🌸