Change Theme dynamically in flutter 3.0.0 | Provider package | Shared preferences

Hello viewers,

So today we are going to learn how to do dynamic theming of your existing app.

Let’s quickly start by adding some useful packages in your pubspec.yaml file

provider: any

shared_preferences: any

after adding packages in your yaml file lets create a theme for you to switch between them

source 👉 view file

theme.dart

here we have two themes you can create as much as theme you want for your application.

now lets create some controller to handle theme change

source 👉 view file

theme_provider.dart

created theme changer controller using provider, so that we don’t need to build our app again to see changes provider will handle state for the application to switch between themes, you can use any state management tool to do this .

Now lets store our theme so that we do not have to change our theme every time we use our application, to do this we are using shared_preferences package to store theme locally. This will store our theme locally it will work for both android and iOS devices.

source 👉 view file

shared_preferences.dart

after adding all the changes lets do some more creativity in UI to implement theme change add a switcher

source 👉 view file

change_theme_ui.dart

now lets quickly do more change in your main file of application.

wrap main method with ChangeNotifierProvider method with your them controller.

now you are all set for your application, you can view full demo on youtube

full source code

Thank you

Like | Comment | Share