Easy and Dynamic Themes in Flutter

Develop an application with dynamic themes has never felt easier than with Easy Dynamic Theme

When I decided to add this feature in my current project I came across several ways to achieve this goal, but none of them really got all my needs covered.

I was looking for a plugin (or some easy way) that would provide:

• Dynamic theme: On new versions of Android you can define on the system setting the mode (light / dark) of your preference, and I need my app to get this information and build the UI accordingly.
• Switch between themes: Some users may want to "force" his preferred theme no matter what the system says, or actually reset the theme mode to dynamic and be defined by the system.
• Persist user selection: Of course, this option is not negotiable.

This was what I was aiming to find, so I took all the little pieces I found and made to myself a pretty good looking hello world app, and at that point I decided to make a plugin that could make things easier to other flutter developers who want to achieve this too, as easily as I can and save them as many hours of tedious web searching as possible.

Enough chitchat, let's show some code

Let's get the app configuration ready:

All the cool magic occurs in the main.dart file.

First, just wrap your MyApp with an EasyDynamicThemeWidget and add the values for the theme, darkTheme and themeMode attributes in your MaterialApp as follows:

void main() { 
  runApp( 
    EasyDynamicThemeWidget( 
      child: MyApp(), 
    ), 
  );
}

class MyApp extends StatelessWidget {  
  final String title = 'Easy Dynamic Theme'; 

  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      title: title, 
      theme: ThemeData.light(), 
      darkTheme: ThemeData.dark(), 
      themeMode: EasyDynamicThemeWidget.of(context).themeMode, 
      home: new MyHomePage(title: title,) 
    ); 
  }
}

No way, is that it!!!??? Yes, easy as that.

How can I actually change the theme?:

To do this, you just need to execute this from anywhere in your app:

EasyDynamicTheme.of(context).changeTheme();

With the code above, you will toggle (starting from your current theme) between the Theme Modes in the following order:
dynamic -> light -> dark -> dynamic -> ...

Or, if you prefer to play yourself with it, the function have two optional parameters (dynamic and dark) to achieve this.

And if I want to get the current theme?:

Well, in that case, you can get the current theme of your application as follows:

ThemeMode themeMode = EasyDynamicTheme.of(context).themeMode;

This will return one of the following values:

• ThemeMode.system - Use either the light or dark theme based on what the user has selected in the system settings.

• ThemeMode.light - Always use the light mode regardless of system preference.

• ThemeMode.dark - Always use the dark mode (if available) regardless of system preference.

Easy peasy, don't you think? ;)

Please visit my Github Repo or the plugin's page at pub.dev for full documentation.