column
The Column widget is a versatile and commonly used layout widget in Flutter. It allows you to arrange its children vertically in a single column, making it perfect for building user interfaces that have stacked components or for creating multi-section screens. Here's a detailed overview of the Column widget:
Key Properties and Features of the Column Widget:
Column Widget:children: Thechildrenproperty is a list of widgets that you want to arrange vertically within theColumn.mainAxisAlignment: This property allows you to specify how the children should be aligned vertically. You can choose from options likestart(top),end(bottom),center,spaceBetween,spaceAround, and more.crossAxisAlignment: This property controls how children should be aligned horizontally. Options includestart(left),end(right),center, andstretch.mainAxisSize: You can set this property toMainAxisSize.minto make the column's height fit the content tightly, orMainAxisSize.maxto make it take up as much vertical space as possible.textDirection: Used to control the text direction within the column, which is important for languages that are read from right to left (e.g., Arabic).verticalDirection: Determines whether the children are stacked from top to bottom (default) or from bottom to top.
Example Usage:
Here's an example of how to use the Column widget in Flutter:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
)In the above code:
We create a
Columnwidget.We set the
mainAxisAlignmentandcrossAxisAlignmentproperties to center the children both vertically and horizontally.Inside the
childrenproperty, we add threeTextwidgets, creating a column of text items.
This will result in a vertical stack of text items centered both vertically and horizontally on the screen.
The Column widget is a fundamental part of Flutter layouts and is used extensively for building various UI components, including forms, lists, and even complete screens. It's a valuable tool for creating organized and responsive UIs.
Last updated