Flutter Column Widget

Posted on Thursday, 02 March 2023 03:28 PM

The Column widget in Flutter is used to arrange child widgets vertically. It's a very useful widget when you want to display multiple widgets in a single column. You can customise the appearance and behaviour of the Column widget by using various properties.

Here's an example of how to use the Column widget:

Column(
      children: const [
    Text('Deliver features faster'),
    Text('Craft beautiful UIs'),
    Expanded(
      child: FittedBox(
        child: FlutterLogo(),
      ),
    ),
  ],
)

Some common properties of the Column widget:

children: A list of child widgets to be arranged vertically.

mainAxisAlignment: Determines how the child widgets should be aligned vertically within the Column.

crossAxisAlignment: Determines how the child widgets should be aligned horizontally within the Column.

mainAxisSize: Determines how much vertical space the Column should occupy.

textBaseline: Determines the baseline used to align text within the Column.

verticalDirection: Determines the direction in which the child widgets should be arranged.

Output:

Here's an example that demonstrates how to use some of these properties:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: [
    Text('Widget 1'),
    Text('Widget 2'),
    Text('Widget 3'),
  ],
)

In this example,

We've set the mainAxisAlignment property to MainAxisAlignment.spaceBetween to evenly distribute the child widgets vertically within the Column. We've also set the crossAxisAlignment property to CrossAxisAlignment.center to center the child widgets horizontally within the Column. Finally, we've set the mainAxisSize property to MainAxisSize.max to make the Column occupy as much vertical space as possible.

K-Learn