Flutter design homogenizes your theme

Brother Cat said

If you face the computer for a long time like me, share a few experiences that are good for your eyes

Use natural light indoors where it is possible, turn off redundant light sources
Reduce the display resolution ratio and larger fonts
If you need more screen space, you can add a secondary screen
If possible, slowly adapt to the dark theme
The contrast of the color tone is lower
Work continuously for 2 hours, get up and walk, let your eyes look into the distance

Of course not everyone is suitable, just make your eyes comfortable

This article tells you how to use ThemeData to globally manage Flutter's interface style.

Once I finished the project and passed the review, the product told me to adjust the style, brush it, and gave me a new sketch design draft. My heart was resisting, but I could only analyze it patiently. For this new version of the style standard, fortunately, the designer is a master of design discipline and works fairly well.

Then I solved 90% of the problems through ThemeData, because I used official components as much as possible in the code, so that the object can be found in ThemeData.

The remaining custom components should be extracted from common components for me, so the modification is complete.

Read the suggestions, you can get a general understanding of the content through my translation, if you are interested, you can taste the original text carefully, there is a link to the original text below.

Old iron remember to forward, Brother Mao will present more Flutter good articles~~~~

WeChat group ducafecat

b Station https://space.bilibili.com/404904528

original

https://medium.com/flutter-community/flutter-design-make-your-theme-homogeneous-13ddeffb186f

Code

https://github.com/GONZALEZD/flutter_demos/tree/main/app_theming

reference

text

In many Flutter source codes and applications, I have observed a recurring practice of directly adding custom styles through widget parameters, resulting in inconsistent design and additional maintenance. As a personal example, I have to maintain a Flutter application where all titles have different font sizes (sometimes font weight).

In this article, I will explain your importance in the way that you should design your Flutter application, especially the subject of concern.

In your opinion, what is the difference in the code of these "settings" pages?

Settings page

What is the correct way to apply the theme?

In the image above, the "Settings" page shares the exact same code. At this level, there is no strict distinction between these four designs.

There is nothing magical here: all the theme-related things are concentrated on a higher level, in the MaterialApp widget. This small tool allows you to define two themes, one for light brightness and the other for dark theme mode.

In addition, if no value is given, most widgets will retrieve their design from it.

The widget is setting default values from ThemeData (in most cases)

Let's look at an example of how to do this correctly: Card widget. You can observe that in the third example on the settings page, the shape is a straight line instead of a corner.

And only the'child' attribute is used in the code: Card (child: ...)

When you delve into how the Card widget is designed, you will see how its shape is defined. The following is the code document about the Card.shape property:

/// 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;

Therefore, to ensure that "normal" cards share the same design, you must define your own ThemeData and use it as a theme (or darkTheme) in the 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 code above demonstrates how to change the card design, but you can make changes for almost all widgets from the Flutter SDK. In addition, you should gather theme-related content into a single file, because ThemeData is a huge data structure.

The theme data covers all widgets, right?

Unfortunately, ThemeData does not cover all widgets. For example, you cannot define a list patch design in it. Fortunately, you can achieve this with the ListTileTheme widget.

Explains how to change the selected color and fill of the list tile without having to explicitly set the page in the source code.

With ListTileTheme, we can redefine the selected title/background and foreground color without changing a line of page code

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, it has nothing to do with design. Its advantage is to avoid code noise and make it concise and easy to understand. Also, what I like is that all my methods are small (less than 30 lines).

to sum up

In this article, we learned how to centralize application design into ThemeData objects. As you understand, you may need to read a lot of Flutter SDK code documentation, but when you or other colleagues need to maintain it, the benefits come:

Avoid code duplication
Reduce the code in the page to make the code easier to read and understand
Ensure design consistency

But as you may have seen, the ThemeData object is a very large structure and is constantly evolving. So please pay close attention to it!

I look at ThemeData when I start a new project

To go further...

Two more tips for you! First, if you want a specific design for one of your components, instead of customizing it in the build method, you can package the widget into a Theme widget.

When you design a new widget, you may want to mimic the SDK widget by retrieving theme information from ThemeData. As you may have seen, inheriting from ThemeData is not the correct way. Instead, you can "extend" it with the InheritedTheme widget and imitate how it is implemented in the ListTileTheme widget.

As usual, you can find the source code and adobe design used in this article here:

https://github.com/GONZALEZD/flutter_demos/tree/main/app_theming

https://ducafecat.tech/

https://github.com/ducafecat