Column

Column is a common layout control in Flutter. It is responsible for vertical layout. Row is responsible for horizontal layout, and both inherit from Flex, similar to UIScrollView in iOS, but with many differences. Let’s look at the Column constructor

Column({
    /// key
    Key key,
    /// The default mode for Column is mainAxisalignment.start
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    /// Represents the size of Column in the vertical direction. The default value is Max, indicating that the vertical direction space is filled as much as possible. If this is min, it's taking up as little vertical space as possible
    MainAxisSize mainAxisSize = MainAxisSize.max,
    /// The horizontal axis is centered by default
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    /// The layout order of the child controls, and the writing habits of different countries (Chinese and English are written from left to right, Arabic is written from right to left). This parameter can help us adjust the layout order
    TextDirection textDirection,
    /// Represents the vertical direction versus its direction
    VerticalDirection verticalDirection = VerticalDirection.down,
    /// Baseline alignment is used in Row
    TextBaseline textBaseline,
    /// Child controls
    List<Widget> children = const <Widget>[],
}) 
Copy the code

mainAxisAlignment

MainAxisAlignment receives an enumeration of type mainAxisAlignment. There are six enumerations of mainAxisAlignment, as follows:

Enumerated values describe
start Align with the starting position
end Align with the end position
center Align center
spaceBetween Divide the remaining space into n-1 pieces (n is the number of child controls) and insert each piece between the child controls
spaceEvenly Divide the remaining space into n+1 pieces (n is the number of child controls) and distribute them evenly
spaceAround Divide the remaining space into 2n pieces (n is the number of child controls), one above and one below each child control

See the description is relatively obscure, let’s directly look at the effect:

MainAxisAlignment.start

In the top

MainAxisAlignment.center

In the middle

MainAxisAlignment.end

In the bottom of the

MainAxisAlignment.spaceBetween

Divide the remaining space into n-1 pieces (n is the number of child controls), which is 3 points, and insert each piece between the child controls. The green numbers are the numbers of each copy

MainAxisAlignment.spaceEvenly

Divide the remaining space into n+1 pieces (n is the number of child controls), which in this case is 5 points, and distribute them evenly.

MainAxisAlignment.spaceAround

Divide the remaining space into 2n pieces (n is the number of child controls), which in this case is 8 points, one above and one below each child control

crossAxisAlignment

CrossAxisAlignment Receives a crossAxisAlignment enumeration value, as listed in the following 5

Enumerated values describe
start Align with the starting position
end Align with the end position
center Align center
stretch The horizontal expansion is the same size as Column
baseline invalid

CrossAxisAlignment.start

In the left side

CrossAxisAlignment.center

In the middle



CrossAxisAlignment.end

In the right side

CrossAxisAlignment.stretch

The size of the child control stretches to andColumnThe same size

textDirection

The textDirection parameter accepts an enumeration type of type textDirection, which has two different enumeration values, as follows

Enumerated values describe
rtl The writing convention starts from the right and child controls are aligned from the right by default
ltr The writing convention is to start from the left. Child controls are aligned from the left by default
crossAxisAlignmentParameters are subjected totextDirectionParameter value Impact.
As follows:
  • whentextDirectionThe parameter value isltrWhen,crossAxisAlignmentParameters forCrossAxisAlignment.startThe child controls are aligned to the left.

  • whentextDirectionThe parameter value isltrWhen,crossAxisAlignmentParameters forCrossAxisAlignment.endThe child controls are aligned to the right.

  • whentextDirectionThe parameter value isrtlWhen,crossAxisAlignmentParameters forCrossAxisAlignment.startThe child controls are aligned to the right.

  • whentextDirectionThe parameter value isrtlWhen,crossAxisAlignmentParameters forCrossAxisAlignment.endThe child controls are aligned to the left.

In general textDirection controls writing habits to change layout. This is actually used a lot when you’re doing internationalization. Rows, which we’ll cover in the next section, are also affected.

In the above description, there are the starting position and the ending position. Why not write the left or right side directly? In fact, it is influenced by the textDirection.

To see the Column example in action, go to my Github repository project Flutter_app ->lib-> Routes ->column_page.dart and download it and run it.