A Quick Guide to Flutter Column widget

Flutter Column widget shows its children in a vertical style.

Create a new flutter project, Let’s add a Text widget to column_example.dart file (right click on lib folder > New > Dart File)

How to create a Dart file ?

We can use escape sequence ‘\n’ to break a line and show the text below the string.

Text("Ice cream\n Donut \n Pizza")

Full Code : column_example.dart

import 'package:flutter/material.dart';
void main()
{
  runApp(ColumnExample());
}
class ColumnExample extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text("Ice cream\n Donut \n Pizza"),
        ),
      ),
    );
  }
}

Flutter requires a lot of widgets for creating a full-fledged app. So it’s tricky to organize every widget in a meaningful way. Some of the flutter widgets accept only one child.

Let’s look at an example; Center widget can only accommodate one child as a widget. Here Column widget is a lifesaver widget that displays its children in a vertical style.

Let’s rewrite our code

Column(
  children: [
    Text("Ice cream"),
    Text("Donut"),
    Text("Pizza"),
  ],
)

The Flutter Column widget’s constructor call has a children parameter, and the children parameter’s value is a list. A list is a collection of objects. These objects are indexed initially with 0. These objects could be Text widgets.

import 'package:flutter/material.dart';
void main()
{
  runApp(ColumnExample());
}
class ColumnExample extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              Text("Ice cream"),
              Text("Donut"),
              Text("Pizza"),
            ],
          )
        ),
      ),
    );
  }
}

Oh! Wired output

Don’t worry. Let’s fix this.

Let’s look at the Details Tree. (Flutter Inspector > Details Tree) Click on the Column widget. You can see that the mainAxisAlignment property set to start automatically.

Now let’s change it to center.

mainAxisAlignment: MainAxisAlignment.center

mainAxisAlignment is the name of a parameter, and MainAxisAlignment is the name of an enum.

import 'package:flutter/material.dart';
void main()
{
  runApp(ColumnExample());
}
class ColumnExample extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Ice cream"),
              Text("Donut"),
              Text("Pizza"),
            ],
          )
        ),
      ),
    );
  }
}

Flutter Column Widget : spaceAround

mainAxisAlignment: MainAxisAlignment.spaceAround