Padding class

introduce

It is a Widget, and anyone who has written front-end code should know this property. It is the set margin property. Using Padding, you can effectively create an empty area around the child, the empty area of the inner margin that is also part of the widget.

The Padding layout is divided into two cases:

  • When child is empty, create a left+right and top+bottom region;
  • When the child is not empty, the Padding passes layout constraints to the child, reducing the layout size of the child based on the Padding property. The Padding then adjusts itself to the size of the child setting the Padding property, creating a blank area around the child.

Also, note that there are no separate Margin controls in Flutter. The Container also has a margin attribute, but let’s look at the source code for margin:

if(margin ! = null) current = new Padding(padding: margin, child: current);Copy the code

It is not hard to see from the above that the difference between margin and padding is diluted by Flutter, and margin is essentially implemented by the padding Widget.

Design reason

Why use a Padding Widget instead of a Container with a container.padding property?

If you use the Container. Padding parameter, then the Container will actually create a simple padding Widget for you. The Padding itself is pretty simple, and it can do pretty much anything that needs spacing; In a single-pitch scenario, using Padding is less expensive than using a Container, because the Container contains many widgets in addition to Padding. A Container can do everything that a Padding can do, but a Container can do more. Container combines many simpler widgets into a package.

In fact, most Widgets in a Flutter are simply combinations of other, simpler Widgets. Composition, not inheritance, is the primary mechanism for building Widgets.

Inheritance relationships

Object -> Diagnosticable -> DiagnosticableTree -> Widget -> RenderObjectWidget -> SingleChildRenderObjectWidget -> Padding

The constructor

Padding ({Key Key, @required EdgeInsetsGeometry Padding, Widget Child}) Creates a Widget with child items.

const Padding({ Key key, @required this.padding, Widget child, }) : assert(padding ! = null), super(key: key, child: child);Copy the code

Commonly used attributes

  • The padding – EdgeInsetsGeometry

    • Insert the margin space value of the child.
    • Parameter type is EdgeInsetsGeometry, which is the base class of EdgeInsets and EdgeInsetsDirectional. In practical use, EdgeInsets are generally used if they do not involve internationalization, such as adaptation to The Arab region. We can infer from the name EdgeInsetsDirectional that it’s directional. Its four margins do not limit the left and right, but according to the direction, so that can do international adaptation. (Same idea as Android paddingLeft/paddingStart)
    • EdgeInsets, a class that describes the padding of the screen size.

  • The child to the widget

    • final, inherited
    • The child

  • The hashCode – int

    • The hash code for this object.
    • read-only, inherited

  • The key to the key

    • Controls how one widget replaces another widget in the tree. […].
    • final, inherited

  • RuntimeType – type

    • Represents the runtime type of the object.
    • read-only, inherited

Commonly used method

  • CreateRenderObject (BuildContext Context) → RenderPadding

    Create an instance of RenderObject represented by RenderObjectWidget.

  • DebugFillProperties (DiagnosticPropertiesBuilder properties) and void

    Add additional properties associated with the node.

  • UpdateRenderObject (BuildContext Context, covariant RenderPadding renderObject) →void

    As the name implies, this method is used to copy the configuration described by this RenderObjectWidget into the given RenderObject. This type is the same type returned by the createRenderObject of this object.

Example:

Padding(Padding: EdgeInsets. All (10.0), child: const Card(child: Text)'Flutter Padding Example')))Copy the code

conclusion

The Padding itself is a very simple Widget that is used to set the inner margins of child controls. You can do everything from Padding to Container. However, Container combines more simple widgets, so you can use the Padding or Container as needed.

The author



xiaosongzeem