In a Flutter, if you want to specify the position of the pieces, you can use Stack and Positioned, they can specify the exact offsets of one or more child elements relative to the edges of the parent and can overlap.

However, if we simply want to adjust the position of a child element in the parent element, it is easier to use the Align component.

We can also use the Center component to Center the child elements

Align

The Align component adjusts the position of its children and determines its own width based on the width of the children

The source code example

Constructors are as follows:

Align({
  Key key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  Widget child,
})
Copy the code

Attribute interpretation

alignment

It represents the starting position of the child component within the parent component.

It needs a value of type AlignmentGeometry. AlignmentGeometry is an abstract class that has two common subclasses: Alignment and FractionalOffset, described below.

WidthFactor, heightFactor

Property used to determine the width and height of the Align component itself.

  • These are two scaling factors that multiply the width and height of the child elements, respectively, resulting in the width and height of the Align component

  • If the value is null, the width and height of the component will take up as much space as possible.

Code examples:

Container(height: 200.0, width: 200.0, color: Colors. Blue [50], child: Align(alignment: Align. TopRight, child: Image( width: 100, height: 100, image: AssetImage('images/Test.jpg'), )), );Copy the code

Operation effect:

In this example, we specify the width and height of both containers to be 200. If we do not specify the width and height explicitly, we can achieve the same effect by specifying both widthFactor and heightFactor to be 2:

Container(// height: 200.0, // width: 200.0, color: color. blue[50], child: Align(widthFactor: 2, heightFactor: 2) 2, alignment: Alignment.topRight, child: Image( width: 100, height: 100, image: AssetImage('images/Test.jpg'), )), );Copy the code

Since the width and height of the image are all 100, the final width and height of Align is 100*2=200

Alignment

In the above example, we specify the image position alignment: alignment. TopRight, which means to be displayed in the upper right corner, and other values, such as:

  • Left upper corner of the topLeft
  • TopRight corner
  • TopCenter high
  • Center to center
  • CenterLeft left in
  • In the centerRight right
  • Lower left corner bottomLeft
  • In under the bottomCenter
  • BottomRight the bottom right hand corner

Of course, Alignment can also be expressed in the form of coordinates. Alignment inherits AlignmentGeometry, which represents a point in the rectangle. It has two attributes X and Y, which represent the offset in the horizontal and vertical directions respectively.

Definition: Alignment(this.x, this.y)

Coordinate transformation formula: X *childWidth/2+childWidth/2, x*childHeight+childHeight/2) Where childWidth is the width and childHeight is the height of the child element.

But it’s special, because its origin is the center of the rectangle, not the top left point in our Web, so if you write Alignment(-1, -1), it’s the top left point, so be careful.

Code examples:

Container(color: Colors. Blue [50], child: Align(widthFactor: 2, heightFactor: 2, alignment: alignment (0,0), child: Image( width: 100, height: 100, image: AssetImage('images/Test.jpg'), )), );Copy the code

Operation effect:

Container(color: Colors. Blue [50], Child: Align(widthFactor: 2, heightFactor: 2, alignment: alignment (2,0), child: Image( width: 100, height: 100, image: AssetImage('images/Test.jpg'), )), );Copy the code

Operation effect:

FractionalOffset

As mentioned above, the coordinate origin of an Alignment is the central point, whereas FractionalOffset is different. FractionalOffset inherits an Alignment. The only difference is that the coordinate origin is different.

X * childWidth, fractionalOffse. y * childHeight)

The origin of his coordinates is the upper left corner of the rectangle, which is the same as the Web

Code examples:

Container( color: Colors.blue[50], child: Align( widthFactor: 2, heightFactor: 2, alignment: FractionalOffset(0,0), child: Image(width: 100, height: 100, Image: AssetImage('images/ test.jpg '),);Copy the code

Operation effect:

Align vs. Stack

As you can see, both Align and Stack/Positioned can be used to specify the offset of the child with respect to the parent, but they have two main differences:

  • Different positioning reference systems; The reference frame of Stack/ positioning can be the four vertices of the parent box rectangle; Align needs to determine the origin of coordinates through alignment parameters first. Different alignments will correspond to different origin, and the final offset needs to be calculated by the conversion formula of alignment.

  • A Stack can have multiple child elements, and child elements can be stacked, whereas Align has only one child and no Stack.

Center

This component is simpler and can center all its children

The source code example

Constructors are as follows:

class Center extends Align {
  /// Creates a widget that centers its child.
  const Center({ Key key, double widthFactor, double heightFactor, Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}
Copy the code

As you can see, Center inherits from Align and has only one less alignment parameter than Align.

Since Align’s constructor has an alignment value of align. center, we can assume that the center component is actually the Align of align.center.

Code examples:

Container(
  color: Colors.blue[50],
  child: Center(
	child: Text('xxx'),
  )
);
Copy the code

Operation effect:

One other thing I forgot to mention is that when widthFactor or heightFactor is null the width and height of the component takes up as much space as possible, which is important to note,

Code examples:

Container(
  child: Column(
	children: <Widget>[
	  DecoratedBox(
		decoration: BoxDecoration(color: Colors.red),
		child: Center(
		  child: Text("xxx"),
		),
	  ),
	  SizedBox(
		height: 20,
	  ),
	  DecoratedBox(
		decoration: BoxDecoration(color: Colors.red),
		child: Center(
		  widthFactor: 1,
		  heightFactor: 1,
		  child: Text("xxx"),
		),
	  )
	],
  ),
);
Copy the code

Operation effect:

portal

21. Stack, tourists

Flutter layout controls –>Wrap, Flow

Flutter layout controls –>Flex, Expanded

Flutter layout controls –>Row, Column

S_S