Enhancing App UIs with Flutter Theming Capabilities

When working with Flutter, one of the most common questions developers have is how to efficiently manage themes to create visually appealing and consistent UIs throughout their projects.  Themes are the components of the design system that we use.

Flutter apps typically make use of Material Design or Cupertino. These design solutions enable you to achieve a cohesive and consistent look across your application. Other than basic design options we have customization options in Flutter theming.

The article unlocks the secrets of Flutter theme properties. Join us as we embark on a journey revealing the art of harnessing these powerful tools within your application.

So, without delay, let's move ahead!

‍

What is Flutter Theming?

The term "Theming" refers to the process of modifying an application's appearance to better suit your preferences or needs. It's what makes your app appealing, and because everyone has different personal preferences, the details can vary.

Flutter theming is changing the theme of your Flutter app. For example, switching from Flutter light mode to Flutter dark mode or vice versa.

Most of Flutter's visual widgets contain a style attribute, which varies according to the widget.

Examples are the TextStyle and ButtonStyle for the Text and Button widgets, respectively. Only that particular widget will be impacted by a style specification.

When doing Flutter theming, it is common practice to add Theme widgets to the widget hierarchy. To complement the design languages they are implementing, the higher-level Cupertino and Material libraries even offer their own built-in themes.

All child widgets of the Flutter theme widget automatically inherit its style. It requires a ThemeData argument that contains the data necessary to define the colors and font styles. You can see how a Theme widget uses an InheritedWidget in the Flutter source code to distribute Flutter ThemeData across the widget tree.

‍

How to use Flutter theming in an app?

In Flutter, we may create app-wide themes or utilize Theme widgets to specify the colors and font types for a specific section of the application. App-wide themes are created as Theme widgets under the MaterialApp widget in the app's root.

As mentioned above, we can transition between an application's light and dark theme with Flutter theming. The default color scheme for the MaterialApp in Flutter is light blue. When you open the counter app by default, you can see it is just blue and white.

After we define a Flutter theme, we can utilize it in any widget throughout the program. Material widgets in Flutter may also use our theme to customize the background colors and font styles for AppBars, Checkboxes,  Buttons, and many others.

When building an application, Flutter uses the default theme. To share a custom theme across the entire application, we must utilize Flutter  ThemeData inside the MaterialApp widget.

There are many ways to do Flutter theming, from customizing the appearance of plain text and icons to utilizing styling widgets like the Container widget or TextButton.

‍

Flutter theming with Widgets and Containers

By customizing a text widget and the Container widget, we can see how to style widgets and Containers in Flutter.

Flutter has a TextStyle class that contains many attributes that may be used to customize the look and feel of the text widget.

1     Text("Have a nice day!")
2     

This text is displayed on the screen by Flutter using its standard colour, size, structure, and weight. Now that we have added some design, the app will look and feel better. By changing the features that the TextStyle class provides, we can achieve that.

1     Text("Have a nice day!", 
2     style: TextStyle(
3       color: Colors.blue, 
4       weight: FontWeight.bold, 
5       fontSize: 18,
6       ),
7      ),
8     

We modified the text's appearance and feel by modifying the TextStyle class's settings, which also brought interest to the application's overarching theme.

We style the Container widget in the same way we decorated the TextStyle widget by altering the parameters of the BoxDecoration class, which are then passed to the Container widget's decorating argument.

1      Container(
2      height: 46,
3      margin: const EdgeInsets.all(16),
4      decoration: BoxDecoration(
5      color: Colors.grey[300],
6      borderRadius: const BorderRadius.all(
7       Radius.circular(16),
8      ),
9      border: Border.all(
10       color: Colors.blue,
11       width: 2,
12      ),
13      ),
14     );
15     

By modifying the borderColor property, we gave the container in the example above a colour (grey) and a blue border. This results in a blue border surrounding the container itself that is 2px wide.

Changing the borderRadius to a circular one of 16px was another styling decision we made in the code block above. Instead of the flat corners that come with the default container, this gives the container an excellent rounded contour at the edges.

Last but not least, we added a margin of 16 pixels around the entire container, leaving 16 pixels on either side.

‍

Using the Material ThemeData class

Material widgets in Flutter may also use our Theme to customise the font styles and background colours for AppBars, Buttons, Buttons, Checkboxes, and many other widgets.

The Flutter ThemeData class contains the colours, typography, and form features of a Material Design theme. We usually pass it as an argument to the MaterialApp widget, which applies the theme to all descendent widgets.

In some cases, we want to override the app-wide theme in a specific section of an application; in that situation, we must encase the app area with the theme widget. Flutter provides us with two options for doing so:

‍

a. By creating a unique ThemeData

The first method is utilized when we do not want any application colours or font styles to be inherited. In that situation, as demonstrated in the code below, we will create an instance of ThemeData() and send it to the Theme widget:

1     Theme(  
2     data: ThemeData(  
3     accentColor: Colors.blue,  
4      ),  
5      child: FloatingActionButton(  
6       onPressed: () {},  
7    	child: Icon(Icons.person),  
8      ),  
9    );  
10     

b. By extending the parent theme

If you don't wish to override anything, go with the second method, which extends the parent theme. It is possible to handle it by using the copyWith() method. See the code snippet below:

1     Theme(  
2    data: Theme.of(context).copyWith(accentColor: Colors.blue),  
3     child: FloatingActionButton(  
4       onPressed: null,  
5    	child: Icon(Icons.person),  
6     ),  
7    );  
8     

Light and dark themes

You may also set separate themes for both light and dark modes in the Flutter theme. Applications often use dark theme modes to conserve battery life and ease eye strain in low-light environments.

The darkTheme property of the MaterialApp widget can be changed. To signal that it's a dark theme, set the ColorScheme's brightness attribute to Brightness.dark.

1      ThemeData darkTheme = ThemeData(
2      textTheme: const TextTheme(
3    	displayLarge: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
4    	bodyLarge: TextStyle(fontSize: 16, color: Colors.white70),
5      ),
6      appBarTheme: const AppBarTheme(
7    	color: Colors.red,
8    	iconTheme: IconThemeData(color: Colors.white),
9      ),
10      colorScheme: ColorScheme.fromSeed(
11    	seedColor: Colors.red,
12    	brightness: Brightness.dark,
13      ),
14     

Dark ThemeData instance

Flutter changes between the two themes depend on the brightness settings of the device.

1     MaterialApp(
2      title: 'Custom Theme Demo',
3      theme: lightTheme,
4      darkTheme: darkTheme,
5      home: MyHomePage(),
6    );
7    MaterialApp(
8      title: 'Custom Theme Demo',
9      theme: lightTheme,
10      darkTheme: darkTheme,
11      home: MyHomePage(),
12    );
13     

The ThemeMode property of the MaterialApp widget may also be used to manually set the theme mode to light or dark. If you do this, the Flutter app will disregard your device's brightness settings and instead utilize the theme you select. 

1      MaterialApp(
2      title: 'Custom Theme Demo',
3      theme: lightTheme,
4      darkTheme: darkTheme,
5      themeMode: ThemeMode.light,
6      home: MyHomePage(),
7    );
8     

Conclusion

In this article, you learned how to use, modify, and extend themes with Flutter theming. Flutter themes are an effective tool to create a unified appearance across your application.

Customizing many parameters to build your ideal theme may be rather interesting, especially because it allows the app to relate to your design preferences.

Short on time? Speed things up with DhiWise!!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.