Flutter - Themes

Themes are an integral part of UI for any application. Themes are used to design the fonts and colors of an application to make it more presentable. In Flutter, the Theme widget is used to add themes to an application. One can use it either for a particular part of the application like buttons and navigation bar or define it in the root of the application to use it throughout the entire app.

Constructor of Theme Class

Theme Theme({
 Key? key,
 required ThemeData data,
 required Widget child,
})

Properties of Theme Widget

• child : The child property takes in a widget as the object to show below the Theme widget in the widget tree.
• data : This property takes in ThemeData class as the object to specify the styling, colors and typography to be used.

In this article, we will look into the same widget in detail by creating a simple app with the Theme widget.

Steps to Implement Theme in Flutter

Step 1 : Creating a Theme

Use the Theme widget to create a theme.  In themes some of the properties that can be used are given below:

• TextTheme
• brightness
• primarycolor
• accentColor
• fontFamily

A simple theme would look like below:

Step 2 : Creating a Container

In Flutter a simple container can be defined as below:

Step 3 : Applying the Theme

To override the default theme of a widget in Flutter one can write the floatingActionButtonTheme widget inside the Themedata() widget.

Complete Source Code (main.dart)

Output: