Working with Themes in Flutter

Working with Themes in Flutter, themes are the most basic and undoubtedly the most important aspect in terms of websites and applications.

In flutter, we can define App-wide themes or we can also use Theme widgets that define the color and font style for a particular part of the app.

In order to create an App-wide Theme, we will need to define ThemeData to the MaterialApp Widget.

Here, we have specified two colors in our ThemeData, i.e., primary color and accent color.

In addition to primary Color and accent Color, we have specified the elevatedButtonTheme. ElevatedButtonThemeData contains multiple properties within it.

Here, we have used the backgroundColor property to specify the background color for the Elevated Buttons used in our app.

 

Now, if we specify the darkTheme property in the MaterialApp, the app will work in Dark Mode, if the Device Display Mode is turned to DarkMode.

The output will be –

If we want to add the specific theme to a particular widget or part of the app, we can wrap it with Theme Widget.

In Theme Widget, we have the property as data in which we can add the ThemeData.

The output will be –

Conclusion

In this blog, we have read about Working with Themes in Flutter.

I hope it will help you out in understanding and getting a brief idea about it.

Thank you for reading!!

References 

https://wwf.panda.org/discover/our_focus/forests_practice/importance_forests/

https://flutter.dev/docs/cookbook/design/themes