How to make your theme homogeneous in Flutter?

In many Flutter source codes and applications, there is the practice of adding custom style directly through widget parameters. So, in this article, we will see how to make your theme homogeneous in Flutter.

How to make your theme homogeneous in Flutter?

The practice of adding custom style leads to an inconsistent design and extra maintenance. So, now we will discuss the importance of the way you should design the Flutter application, especially focusing on the theme.

What is the right way to apply a theme to your application?

All theming-related stuff is centralized at a higher level, in the MaterialApp widget. Moreover, this widget allows you to define two themes, one for light brightness, the other for a dark theme mode. If no value is given most of the widgets retrieve their design from it.

Let’s take an example of how to do this properly: the Card widget. When you dig into how the Card widget has been designed, you can see how its shape is defined. Here is the code documentation about Card.shape attribute:

/// The shape of the card's [Material].
///
/// Defines the card's [Material.shape].
///
/// If this property is null then [CardTheme.shape] of [ThemeData.cardTheme]
/// is used. If that's null then the shape will be a [RoundedRectangleBorder]
/// with a circular corner radius of 4.0.
final ShapeBorder? shape;

So, to ensure that ‘vanilla’ cards share the same design, you have to define your own ThemeData. Also, you have to use it as a theme (or darkTheme) in your MaterialApp widget.

ThemeData example() {
  final base = ThemeData.dark();
  final mainColor = Colors.lightBlue;
  return base.copyWith(
    cardColor: Color.lerp(mainColor, Colors.white, 0.2),
    cardTheme: base.cardTheme?.copyWith(
      color: Color.lerp(mainColor, Colors.black, 0.1),
      margin: EdgeInsets.all(20.0),
      elevation: 0.0,
      shape: BeveledRectangleBorder(
        borderRadius: BorderRadius.circular(14.0),
        side: BorderSide(color: Colors.white24, width: 1)),
    ),
  );
}

The above code illustrates how to change the card design. But you can do it for pretty much every widget coming from Flutter SDK. Also, you should centralize theme-related stuff into a single file, because ThemeData is a huge data structure.

Unfortunately, ThemeData does not cover all widgets. For example, you cannot define list tiles design in there. Fortunately, you can achieve this through the ListTileTheme widget. So, that is how you can change list tile selected color and padding, without setting it in the source code of the page.

ListView.builder(
  itemBuilder: (context, index) {
    final value = elements[index];
    return ListTile(
      selected: value == selected,
      title: Text(value.title),
      subtitle: Text(value.message),
      leading: Icon(value.icon),
      onTap: () => setState(() => selected = value),
    );
  },
  itemCount: elements.length,
);

As you can see in the code, there is nothing related to the design. It has the advantage to avoid code noises, making it easier to understand. Also, one important thing is the fact that all methods are small (less than 30 lines).

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen how to make your theme homogeneous in Flutter. Also, feel free to comment and provide any other suggestions regarding Flutter.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.