Themes — Part 2— Flutter

In the previous story, we learned the basics of light and dark themes in flutter and we know flutter can handle the theme, based on system settings. But we can also provide an option to users to change the theme of the app.

themeMode

themeMode determines which theme will be used by the application if both theme and darkTheme are provided. If we don’t add themeMode, ThemeMode.system will be set by default.

themeMode: ThemeMode.dark

Even with this themeMode, we can set any one of the modes alone right? If we want to provide an option for a user to change the theme, we need to set the themeMode dynamically. In our example, we are using ValueNotifier to achieve this.

You can use any widget to provide an option for a user to change the theme. In our example, we are using RadioListTile. If you are wondering what is a RadioListTile, you can check this link.

In the above example, in setState(), we are setting theme mode to a variable and also setting the notifier value.

ValueNotifier

When a value is replaced with something that is not equal to the old value as evaluated by the equality operator ==, this class notifies its listeners.

ValueListenableBuilder

A widget whose content stays synced with a ValueListenable. We need to wrap our widget which reflects the value to be changed in the ValueListenableBuilder widget.

In our example, we wrapped the MaterialApp widget inside the ValueListenableBuilder widget. So, whenever the user changes the radio selection, the _themeModeValueNotifier.value will be changed and it will notify the valueListenable and the new value is set to themeMode.

Still, we need to learn a lot about themes. But we made a progress. We will focus on more things about the theme in upcoming stories. You can find the full code in the above-mentioned code pen link. Happy coding!

Update: In the next story, we can learn how to change different light themes dynamically.