Padding Flutter components checked 】 【 | August more challenges

Preface:

This is the 14th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge. To prepare for the August challenge of the nuggets, I’m going to pick 31 components this month that haven’t been introduced before and do a full analysis and attribute introduction. These articles will be used as important material in the collection of the Flutter components. I hope I can stick to it, your support will be my biggest motivation ~

1. Understand the Padding component

The Padding is one of the first things you learn about the Flutter. Its function is as simple as adding margins to child components. In this article, I’ll go back to the beginning of the dream and talk more about the use of Padding and its source implementation.

1.Padding Basic information

Below is Padding component class definition and construction method, it can be seen that it inherited from SingleChildRenderObjectWidget. To instantiate, you must pass in the padding parameter, whose type is EdgeInsetsGeometry. In addition, you can pass in a Child component.

final EdgeInsetsGeometry padding;
Copy the code

2. Use of the Padding component

For example, the following gray box has an Icon component. And if you want to have a margin of 10 around it, you can do that using the Padding component.

In tag1, using the Padding component, specify the Padding value. The effect is as follows:

class PaddingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      alignment: Alignment.topLeft,
      color: Colors.black12,
      child: const Padding( //<--- tag1
        padding: EdgeInsets.all(10),
        child: Icon(
          Icons.ac_unit,
          size: 40, color: Colors.green, ), ), ); }}Copy the code

Components, both visible and invisible, have their size areas. So after adding edgeinsets.all (10) margins, what is the size area of the Padding component? There are three options:

As you can see from the layout viewer, choose A. We all know that the padding is the inner margin and the margin is the margin. From the perspective of the Icon component, it seems that margins are added to it to implement functionality. Using the Padding, however, should be viewed from the perspective of the Padding component: this extends the placeholder area of the Padding component for the child component through the Padding.

Since the margin area of the Padding component is not visible but takes up space, when the other components are placed side by side, it feels like there is a blank space between them.

There is no change in the wrapped Icon component itself, and the Padding component can be nested outside any component. This pluggable functional implementation mode is a major feature of Flutter, which greatly reduces the coupling between components and makes it more flexible to use. The functionality of the Padding component is pretty simple, but the idea is well worth learning:

Almost any component can use the padding property to manipulate margins, but the framework does not make the padding property a public property of widgets. There is no way to predict how many of these common properties there are, and if they are all public properties of the Widget, they would be cumbersome to maintain, and the Widget itself would be onerous. And the separation of different components to achieve the function, through the use of the combination of components, so that each can take what is needed, a lot of natural wise.

3. Know EdgeInsetsGeometry

The margins themselves are four numbers, top left, bottom right. The four numbers are abstracted into EdgeInsetsGeometry in Flutter. We can see that it is a const construct, which means that once the EdgeInsetsGeometry object is created, there is no way to modify its property values. This is why the six properties are obtained by the GET method, but not by the set method.

As an abstract class, EdgeInsetsGeometry cannot be used directly. The available implementations are EdgeInsets and EdgeInsetsDirectional.

The most common one we use is the EdgeInsets, which control the margin size by using the top left and bottom right. Four attribute values are maintained and initialized by construction.

There are four main structures as follows:

EdgeInsets.fromLTRB  // Specify left, top, right, bottom, and four margins (must pass four parameters)
EdgeInsets.all       // Specify a value for the left, top, right, and bottom margins
EdgeInsets.only      // Specify the values of left, top, right, bottom, and four margins.
EdgeInsets.symmetric // Specify horizontal/vertical margin values
Copy the code

In addition, because the operator is overloaded, it means that operators can be evaluated between two EdgeInsets.

The other subclass, EdgeInsetsDirectional, is used less often and has the same functionality except for the boundary semantics of start, up, end, and down. In general, we’re more used to upper-left, lower-right semantics, and there are fewer EdgeInsets.

Second, the source implementation of the Padding component

1. Padding source analysis

It inherits from SingleChildRenderObjectWidget means, the component needs to maintain a RenderObject object to create and update.

In the createRenderObject method, create the RenderPadding, which is used as the constructor parameter. In the updateRenderObject, you update the RenderPadding object. That is, the ability to add margins is done in RenderPadding.

2. RenderPadding source code

The main thing to do with RenderPadding is to improve layout handling in the performLayout method. As you can see, if the child is empty, the RenderPadding size is handled according to _resolvedPadding. That is, the Padding can have a placeholder even if there are no children.

If the child component is non-empty, then the RenderPadding size is calculated from _resolvedPadding and the child component size. The Widget itself is just a property configuration class. RenderObject is the real size concept. It’s just that RenderObject is maintained by RenderObjectWidget, and let’s say the dimensions of the components are more visual and easier to understand.

Finally, when the child is drawn, you can see that the offset is done. This is why the placement of the child component changes after adding the Padding.

This is the end of this article. Thanks for watching. See you tomorrow