Easy and Dynamic Themes in Flutter
Tags: flutter, dart, plugin, new
Published: 2020-10-15 05:54:03

## Develop an application with dynamic themes has never felt easier than with [Easy Dynamic Theme](https://pub.dev/packages/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:

```dart
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:
```dart
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:
```dart
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](https://github.com/rlazom/easy_dynamic_theme) or the plugin's page at [pub.dev](https://pub.dev/packages/easy_dynamic_theme) for full documentation.