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:
mainAxisAlignment
: This property sets the vertical alignment of the children within theColumn
widget. Possible values areMainAxisAlignment.start
,MainAxisAlignment.end
,MainAxisAlignment.center
,MainAxisAlignment.spaceBetween
, andMainAxisAlignment.spaceAround
.crossAxisAlignment
: This property sets the horizontal alignment of the children within theColumn
. Possible values areCrossAxisAlignment.start
,CrossAxisAlignment.end
,CrossAxisAlignment.center
, andCrossAxisAlignment.stretch
.children
: This property takes a list of widgets that will be displayed in theColumn
.textDirection
: This property sets the direction in which the text in theColumn
should be displayed. Possible values areTextDirection.ltr
(left to right) andTextDirection.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.