Column in Flutter

Create Free Backend With Appwrite

Column Widget In Flutter

In Flutter, Column widget displays its children vertically. It is very useful when placing UI top to bottom. This is one of the most used widgets in Flutter.

Example 1: Column In Flutter

In this example, the Column contains three children widgets which are Icon, Text, and Icon.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My First App'),
        ),
        body: const Column(
          children: [
            Icon(Icons.star, size: 50),
            Text('I am learning flutter'),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),
    ),
  );
}
Run Online

Example 2: Create Container Boxes

In this example, you will learn to build 4 different containers inside the Column.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Column In Flutter'),
        ),
        body: Column(
          children: [
            Container(height: 100, width: 100, color: Colors.blue),
            const SizedBox(height: 5),
            Container(height: 100, width: 100, color: Colors.blue),
            const SizedBox(height: 5),
            Container(height: 100, width: 100, color: Colors.blue),
            const SizedBox(height: 5),
            Container(height: 100, width: 100, color: Colors.blue),
          ],
        ),
      ),
    ),
  );
}
Run Online

Column Properties

These are the most common useful properties of the Column widget which help you control the layout of its children:

Property Description
mainAxisAlignment Determines how the children are aligned vertically.
crossAxisAlignment Determines how the children are aligned horizontally.
children The widgets that are displayed inside the column.

Main Axis In Column

In Column, the main axis determines how the children are aligned vertically. The mainAxisAlignment property accepts the following values:

MainAxisAlignment Values Description
MainAxisAlignment.start Children are aligned at the start of the vertical axis.
MainAxisAlignment.end Children are aligned at the end of the vertical axis.
MainAxisAlignment.center Children are centered along the vertical axis.
MainAxisAlignment.spaceBetween Children have equal spacing between them.
MainAxisAlignment.spaceAround Children have equal spacing between them, and also the space at the start and the end is divided evenly.
MainAxisAlignment.spaceEvenly Children have equal spacing before, between, and after them.

Example 3: Main Axis Alignment

In this example, you see 4 containers which are centered vertically. Run this code online and try changing center to start, end, spaceBetween, spaceAround or spaceEvenly.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Column In Flutter'),
        ),
        body: Column(
          // Try replacing "center" with "start", "end", "spaceBetween", "spaceAround" or "spaceEvenly"
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(height: 100, width: 100, color: Colors.blue),
            const SizedBox(height: 5),
            Container(height: 100, width: 100, color: Colors.blue),
            const SizedBox(height: 5),
            Container(height: 100, width: 100, color: Colors.blue),
            const SizedBox(height: 5),
            Container(height: 100, width: 100, color: Colors.blue),
          ],
        ),
      ),
    ),
  );
}
Run Online
Info

Note: By default mainAxisAlignment value is mainAxisAlignment.start

Cross Axis In Column

In Column, the cross axis determines how the children are aligned horizontally. The crossAxisAlignment property accepts the following values:

CrossAxisAlignment Values Description
CrossAxisAlignment.start Children are aligned at the left of the Column.
CrossAxisAlignment.end Children are aligned at the right of the Column.
CrossAxisAlignment.center Children are vertically centered in the Column.
CrossAxisAlignment.stretch Children are forced to fill the available space horizontally.
CrossAxisAlignment.baseline Children are aligned by their baseline (useful for text).

Example 4: Cross Axis Alignment

In this example, you see 4 boxes which are centered horizontally. Run this code online and try changing center to start, end, stretch, or baseline.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Column In Flutter'),
        ),
        body: Container(
          color: Colors.green,
          width: double.infinity,
          child: Column(
            // Try replacing "center" with "start", "end", "stretch", or "baseline"
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
            Container(height: 100, width: 100, color: Colors.blue),
            const SizedBox(height: 5),
            Container(height: 100, width: 100, color: Colors.blue),
            const SizedBox(height: 5),
            Container(height: 100, width: 100, color: Colors.blue),
            const SizedBox(height: 5),
            Container(height: 100, width: 100, color: Colors.blue),
            ],
          ),
        ),
      ),
    ),
  );
}
Run Online
Info

Note: By default crossAxisAlignment value is crossAxisAlignment.center

Example 5: Using Main Axis & Cross Axis Alignment

In this example, you see 4 containers which are aligned vertically in the center. Run this code online and try changing its main axis and cross axis alignment.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Column In Flutter'),
        ),
        body: Container(
          color: Colors.green,
          width: double.infinity,
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              // Try replacing "center" with "start", "end", "spaceAround", "spaceEvenly" or "spaceBetween"
              mainAxisAlignment: MainAxisAlignment.center,
              // Try replacing "center" with "start", "end", "stretch" or "baseline"
              crossAxisAlignment: CrossAxisAlignment.center,
              children: List.generate(
                  50, (index) => Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(height: 100, width: 100, color: Colors.white),
                  )),
            ),
          ),
        ),
      ),
    ),
  );
}
Run Online

Overflow Issue

When you put too many widgets inside a Column and they can’t fit within the screen, you’ll get an overflow error. Here are simple ways to handle this overflow issue in Flutter:

  • Wrap in SingleChildScrollView widget
  • Use Expanded or Flexible widget

Example 6: Wrap In SingleChildScrollView

When you have many children widgets, and they can’t all fit on the screen, you might want to scroll to see the ones that are out of view. For more see the example below:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Column In Flutter'),
        ),
        body: Container(
          color: Colors.green,
          width: double.infinity,
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              // Try replacing "center" with "start", "end", "spaceAround", "spaceEvenly" or "spaceBetween"
              mainAxisAlignment: MainAxisAlignment.center,
              // Try replacing "center" with "start", "end", "stretch" or "baseline"
              crossAxisAlignment: CrossAxisAlignment.center,
              children: List.generate(
                  50, (index) => Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(height: 100, width: 100, color: Colors.white),
                  )),
            ),
          ),
        ),
      ),
    ),
  );
}
Run Online

Example 7: Using Expanded

In a Column, use Expanded to make a widget take up all the available remaining space within its parent widget. For more, see the example below:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Column In Flutter'),
        ),
        body: Container(
          color: Colors.green,
          width: double.infinity,
          child: Column(
             // Try replacing "center" with "start", "end", "spaceAround", "spaceEvenly" or "spaceBetween"
            mainAxisAlignment: MainAxisAlignment.center,
            // Try replacing "center" with "start", "end", "stretch" or "baseline"
            crossAxisAlignment: CrossAxisAlignment.center,
            children: List.generate(
                50,
                (index) => Expanded(
                    child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(height: 100, width: 100, color: Colors.white),
                  ))),
          ),
        ),
      ),
    ),
  );
}
Run Online

Example 8: Using Flexible

Flexible allows a widget within a Column to fit its content but won’t exceed its maximum size, even if there’s extra space available. For more, see the example below:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Column In Flutter'),
        ),
        body: Container(
          color: Colors.green,
          width: double.infinity,
          child: Column(
             // Try replacing "center" with "start", "end", "spaceAround", "spaceEvenly" or "spaceBetween"
            mainAxisAlignment: MainAxisAlignment.center,
             // Try replacing "center" with "start", "end", "stretch" or "baseline"
            crossAxisAlignment: CrossAxisAlignment.center,
            children: List.generate(
                50,
                (index) => Flexible(
                    fit: FlexFit.loose,
                    child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(height: 100, width: 100, color: Colors.white),
                  ))),
          ),
        ),
      ),
    ),
  );
}
Run Online
Info

Note: Expanded forces its child to fill available space, while Flexible allows its child to occupy space without necessarily filling it.