Contain and Add Padding to Widgets Using Invisible Layout Widgets

Some widgets are not meant to add visible content to your app but instead are simply used to move other widgets inside the available space or change the shape and size of a widget in order to make the app look exactly how you want it to look.

They all operate on a child widget, and you can use them to change the shape and size of that widget or to separate the widget from other widgets.

Add Padding to a Widget

There might be cases in which a widget in your app has to (or should) be a certain distance away from all or some other widgets—for example, if the widget has to be separated from other widgets in a list or grid, or if there are multiple small widgets used for interaction close to each other, or maybe just because it looks better with some empty space.

The space that gets left empty is called padding, and is usually defined in terms of the amount of pixels for each direction that are left empty.

You can add padding to the outside of a widget by wrapping it inside a Padding widget.

Padding takes a child and the padding option as named arguments, so you can create a Text with 20px padding the following way:

The padding option takes an object of type EdgeInsetsGeometry, which we’ll learn about in the next section.

EdgeInsetsGeometry and EdgeInsets: Defining the Amount and Position of Padding

You can generate objects of type EdgeInsetsGeometry using the following constructors of the class EdgeInsets:

• EdgeInsets.all(paddingAmount), where paddingAmount is a double value specifying the amount of padding, which adds padding everywhere around the content.

• EdgeInsets.symmetric(vertical: paddingAmountVertical, horizontal: paddingAmountHorizontal), where both arguments are optional and specify the amount of padding for each side in the respective axis.

• EdgeInsets.only(top: paddingAmountTop, bottom: paddingAmountBottom, left: paddingAmountLeft, right: paddingAmountRight), where all four arguments are optional and specify the amount of padding for the respective side of the content.

There are other constructors for EdgeInsets (like EdgeInsets.fromWindowPadding and EdgeInsets.fromLTRB) but they are not really very useful with Padding.

EdgeInsetsDirectional.only and EdgeInsetsDirectional.fromSTEB also exist, and they are just like EdgeInsets.only and EdgeInsets.fromLTRB, but they use start, top, bottom, and end relative to the direction in which text is written and are useful when padding has to change whether the text goes from left to right (like when writing text in the Latin alphabet) or from right to left (like when writing text in the Arabic script or Hebrew alphabet).

The Container and the BoxDecoration

The Container is a generic containment widget, and it has multiple uses, depending on the options we decide to set:

• We can choose to constrain the child to a set width and height.

• We can choose to add a background color to a widget or set of widgets.

• We can add padding to a widget.

• We can make the Container of a shape other than square or rectangular using BoxDecoration.

• We can do all or some of these at the same time.

For example, we can create white text with a blue background and 20 pixel padding between the edges and the text, all limited to a 200x50 rectangle with the following code:

BoxDecoration

BoxDecoration, instead, is used to determine the Container’s features.

You can assign it to the Container’s decoration option and you might be interested in the following options:

• padding, which takes EdgeInsetsGeometry and is the same as Padding.padding.

• shape, which can be BoxShape.circle or BoxShape.rectangle.

• color, image, or gradient, which are used to specify the background, since the BoxDecoration isn’t actually used just for the shape and, if you decide to use the Container.decoration, you need to move arguments such as color to the BoxDecoration’s constructor.

• borderRadius which, when set for a rectangle-shaped box, creates rounded edges of the set BorderRadius, which can be set as the same for all edges using BorderRadius.circular(radius) (where radius is a double number).

Using the following Container and BoxDecoration:

You can make a circle with yellow text in it like this:

And, just to show how they can work anywhere, you can have two in a Column (explained a bit further later in ​The Column​) in the following way (also see the figure):

More detailed examples of the usage of a Container and BoxDecoration can be found in ​Make Round Widgets​.