Flutter's design homogenizes your theme

The cat said

If, like me, you’ve been working with computers for a long time, here are a few tips that are good for your eyes

Use natural light indoors whenever possible, and turn off excess light sources
Display resolution scale small, the font is larger
If you need more screen real estate, add an auxiliary screen
Get used to dark themes if possible
The contrast of the color tones is lower
Work for 2 hours straight, get up and take a walk to get your eyes on the horizon

Of course it’s not for everyone, just make your eyes comfortable

This article shows you how to use TheMeData to manage the Flutter’s interface styles globally.

Once I finished a project and passed the review, the product told me to adjust the style and gave me a new sketch design. I resisted it in my heart, but I could only patiently analyze the style standard of this new version. Fortunately, the designer was a master of design discipline and did things in a standard way.

Then I solved 90% of the problem with ThemeData, because I used the official component as much as possible in the code so that I could still find the object in ThemeData.

For the remaining custom components, I have extracted the public components, so the modification is done.

To read the suggestions, you can get a general idea of the content from my translation. If you are interested, you can read the original text carefully. There is a link to the original text below.

Be sure to retweet brother for more Flutter posts at ~~~~

Ducafecat WeChat group

B stationhttps://space.bilibili.com/40…

The original

https://medium.com/flutter-co…

code

https://github.com/GONZALEZD/…

reference

The body of the

In many Flutter source code and applications, I have observed a recurring practice of adding custom styles directly 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 (and sometimes font weights).

In this article, I will explain the importance to you of the way you should design your Flutter app, especially focusing on topics.

In your opinion, what is the difference between these “Settings” pages in terms of code?

Settings page

What is the right approach to an application theme?

In the figure above, the Settings page shares exactly the same code. At this level, there is no strict distinction between the four designs.

There is nothing magical about this: all the subject-related stuff is concentrated at the higher level, in the MaterialApp widget. This gadget allows you to define two themes, one for Light Brightness and one for Dark Theme mode.

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

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

Let’s look at an example of how to do this correctly: the Card widget. You can notice in the third example of the Settings page that the shape is a straight line instead of a corner.

Only the ‘child’ property is used in the code: Card (child:…)

When you dig into how the Card widget is designed, you’ll see how its shape is defined. Here is the code documentation for 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 // With a circular corner radius of 4.0. Final ShapeBorder? shape;

Therefore, to ensure that the “normal” cards share the same design, you must define your own ThemeData and use it as the theme (or DarkTheme) in the MaterialApp widget.

ThemeData example() { final base = ThemeData.dark(); final mainColor = Colors.lightBlue; Return base.copyWith(cardColor: color.lerp (mainColor, color.white, 0.2), cardTheme: base.cardTheme? .copyWith(color: color.lerp (mainColor, color.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 any widget from the Flutter SDK. In addition, you should concentrate subject-related content into a single file, because ThemeData is a large data structure.

The topic data covers all the widgets, right?

Unfortunately, ThemeData doesn’t cover all widgets. For example, you cannot define a list patch design in it. Fortunately, you can do this with the ListtileTheme widget.

Explains how to change the color and padding of the tiled list selection without having to explicitly set the page in the source code.

With the ListtileTheme, we can redefine the selected title/background and foreground color without changing a single 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. It has the advantage of avoiding code noise and making it concise and easy to understand. Also, I like the fact that all of my methods are small (less than 30 lines).

conclusion

In this article, you learned how to centralize your application design into the ThemeData object. As you can see, you may need to read a lot of Flutter SDK code documentation, but the benefits come when you or another colleague needs to maintain it:

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

But as you may have seen, the ThemeData object is a very large structure that is constantly evolving. So keep an eye on it!

I check TheMeData when I start a new project

In order to go further..

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

When you design a new widget, you might want to emulate the SDK widget by retrieving topic information from ThemeData. As you may have seen, inheriting from TheMeData is the wrong way to do it. Instead, you can “extend” it with the InheritedTheme widget and mimic how it is implemented in the ListtileTheme widget.

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

https://github.com/GONZALEZD/…

The elder brother of the © cat

https://ducafecat.tech/

https://github.com/ducafecat

The issue of

Open source

GetX Quick Start

https://github.com/ducafecat/…

News Client

https://github.com/ducafecat/…

Strapi manual translation

https://getstrapi.cn

WeChat discussion group Ducafecat

A series of collections

The translation

https://ducafecat.tech/catego…