Flutter Column Widget

CodeWithFlutter
2 Min Read

The Column widget in Flutter is used to display widgets in a vertical manner and is part of the Flex layout. Some of the common properties of the Column widget are:

  1. mainAxisAlignment: This property sets the vertical alignment of the children within the Column widget. Possible values are MainAxisAlignment.start, MainAxisAlignment.end, MainAxisAlignment.center, MainAxisAlignment.spaceBetween, and MainAxisAlignment.spaceAround.
  2. crossAxisAlignment: This property sets the horizontal alignment of the children within the Column. Possible values are CrossAxisAlignment.start, CrossAxisAlignment.end, CrossAxisAlignment.center, and CrossAxisAlignment.stretch.
  3. children: This property takes a list of widgets that will be displayed in the Column.
  4. textDirection: This property sets the direction in which the text in the Column should be displayed. Possible values are TextDirection.ltr (left to right) and TextDirection.rtl (right to left).

Here’s an example of how to use the Column widget with some of its properties:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.star),
    Text('Star'),
    SizedBox(height: 10),
    Icon(Icons.star),
    Text('Star'),
    SizedBox(height: 10),
    Icon(Icons.star),
    Text('Star'),
  ],
)

n this example, the mainAxisAlignment is set to MainAxisAlignment.spaceBetween which will distribute the space between the children evenly. The crossAxisAlignment is set to CrossAxisAlignment.center which will center the children horizontally.

Share this Article
Leave a comment