Working with Themes in Flutter

Updated 27 April 2023


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.

Looking out for starting with Flutter app development, check our Flutter app development page.

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 –


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.

Here are some of our other blogs-

Thank you for reading!!


. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home