Column is the most useful and powerful widget in a flutter framework. this widget is used to aligning widgets vertically on a screen, so we need to arrange UI elements as per the design requirements.
Table of Contents
Constructor of Column widget
Column({
Key? key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
MainAxisSize mainAxisSize: MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
TextDirection? textDirection,
VerticalDirection verticalDirection: VerticalDirection.down,
TextBaseline? textBaseline,
List<Widget> children: const <Widget>[]
})
Properties of column widget
- children: children property takes multiple child widgets, it is a List<Widget> type property.
- verticalDirection: it’s an enum type is used for
- textDirection :it is used for handling the direction of the text in the Column widget
- mainAxisSize: it decides the size main axis, its an enum type
- mainAxisAlignment: in column widget are default align vertically, its an enum type property
- crossAxisAlignment: this property is used for placing the children’s widget horizontally.
- textBaseline: it is used for handling text in column widget
MainAxisAlignment
| center | start | end | spaceEvenly | spaceAround | spaceBetween |
| 
| 
| 
| 
| 
|
CrossAxisAlignment
| center | start | end | stretch |
| 
| 
| 
|
crossAxisAlignment and mainAxisAlignment is very much used when we use Column widget,
both properties are Enum types you can use very easily.
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Card(
child: Container(
padding: const EdgeInsets.all(0.0),
color: Colors.black,
width: 100.0,
height: 100.0,
),
),
Card(
child: Container(
padding: const EdgeInsets.all(0.0),
color: Colors.black,
width: 100.0,
height: 100.0,
),
),
Card(
child: Container(
padding: const EdgeInsets.all(0.0),
color: Colors.black,
width: 100.0,
height: 100.0,
),
),
],
),
)
Note:-
sometimes column widget children go beyond screen height (it will give you overflow yellow banner), so you have to use any type of scroll area.
Conclusion
Column widget is very useful widget when you are building layouts, so we are done with column widget see you next time
Happy Coding😋