Dynamic Theme in Flutter

Dynamic Theme means changing/updating themes on the fly from anywhere inside the app.

A theme in Flutter is provided by ThemeData. ThemeData is responsible for holding theme for each and every widget in flutter. Also, we can explicitly change the theme of the widget.

In this article, we are going to see how we can update the theme using a package: ‘dynamic_theme’.

Open pubscpec.yaml and add this dependency

dynamic_theme: ^1.0.1

Now, create a simple MyApp with MaterialApp widget and wrap it with Dynamic theme.

More deep information is provided in this video.

Dynamic theme PRO Coach

return DynamicTheme(
  data: (Brightness brightness) =>
      brightness == Brightness.light ? lightTheme : darkTheme,
  themedWidgetBuilder: (BuildContext context, ThemeData theme) =>
      MaterialApp(
    theme: theme,
    title: 'Dynamic theme',
    home: DynamicThemeExample(),
  ),
);

In DynamicTheme widget we 2 functions data and themedWidgetBuilder.

data Function is responsible to provide ThemeData for the app. It gives us brightness and lets us choose which theme to provide based on brightness. For eg., if brightness is Brightness.light then we pass lightTheme and when brightness is Brightness.dark then we pass darkTheme.

themedWidgetBuilder Function is responsible to give a current theme to its child. it is a function that takes a widget and gives us BuildContext and ThemeData as a parameter. ThemeData is an actual theme that was selected in the data function.

Now that we know what is under the DynamicTheme widget. Let's see how we can toggle the theme.

void toggleTheme() {
  //toggle the theme from dark to light
  Brightness currentBrightness=DynamicTheme.of(context).brightness;
  DynamicTheme.of(context).setBrightness(
      currentBrightness==Brightness.light
      ?Brightness.dark:Brightness.light);
}

The above code describes the toggle function. We can get the current object of a dynamic theme by DynamicTheme.of(context). We get brightness value in that object. If brightness is Brightness.light then we make it Brightness.dark and if it is Brightness.dark then we make it Brightness.light by setBrightness().

We can also use setThemeData to update the app with any theme.

DynamicTheme.of(context).setThemeData()

When we update the brightness by calling setBrightness it updates its child. Since it is a starting point of the app so the whole app is started again with a new theme.

That’s it. This way we can toggle themes in the app.

If you enjoyed this blog, let me know in the comments below how much useful this blog was to you. I’d be very grateful if you’d help it spread by emailing it to a friend or sharing it on Twitter or Facebook. Thank you!

Connect with me on: Github Twitter LinkedIn Instagram Youtube Patreon

#HappyCoding #flutter #widgets #crossplatform #tutorial #firebase #viveky259 #procoach

**Subscribe for upcoming posts. Thanks for reading. Let me know what you think about this post.

📝 Save this story in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.