How to use Column widget in Flutter

Key takeaways
The Column widget in Flutter is a multi-child layout widget that arranges its children vertically, making it essential for building user interfaces with vertically organized components.
The Column widget does not support vertical scrolling; an overflow message is displayed if the children exceed the screen's vertical space. For scrolling, alternatives like the ListView widget should be considered.

The Column widget is one of the Flutter application’s most commonly used layout patterns. It is a multi-child widget that displays its children in a vertical array. This widget is widely used to create user interfaces with multiple components organized in a vertical arrangement. Its main-axis alignment is vertical, as shown in the below image:

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>[],
})

Let’s take a closer look at each parameter and its purpose.

key: This is an optional parameter that allows us to provide a unique identifier for the Column widget.
mainAxisAlignment: This determines how its children are aligned vertically within the available space. The default value is MainAxisAlignment.start: other possible values include MainAxisAlignment.center, MainAxisAlignment.end, and MainAxisAlignment.spaceEvenly.
mainAxisSize: This specifies the vertical size of the Column. The default value is MainAxisSize.max, which allows the Column to occupy all available vertical space. Alternatively, we can set it to MainAxisSize.min to make the Column take up only the required vertical space.
crossAxisAlignment: This determines how the children are aligned horizontally. The default value is CrossAxisAlignment.center. Other options include CrossAxisAlignment.start and CrossAxisAlignment.end, among others.
textDirection: This is an optional parameter that specifies the directionality of the text within the Column.
verticalDirection: This specifies the order in which the children of the Column are laid out vertically. The default value is VerticalDirection.down, which arranges the children from top to bottom. We can also use VerticalDirection.up to reverse the order.
textBaseline: This is an optional parameter that determines the baseline alignment for the text within the Column. By default, it uses the TextBaseline.alphabetic.
children: This is the the list of child widgets is stacked vertically in the Column. We can provide any number of widgets as children. The default value is an empty list ([]).

Implementation

We can follow the instructions given below to add a column widget in UI.

Import the necessary packages

To use the Column widget, we need to import the flutter/material.dart package in your Dart file.

Line 2: We set column property mainAxisAlignment to MainAxisAlignment.center, which means the children will be positioned in the middle of the available vertical space.
Line 3: We set column property crossAxisAlignment to CrossAxisAlignment.start, which ensures that the children are positioned on the left side of each column.
Line 4: We set column property mainAxisSize to MainAxisSize.min, which specifies that the column should take up only the required vertical space.

Output

We get the following output by putting together the code explained above:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Column Widget Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                color: Colors.red,
                height: 100,
                width: 100,
                child: Center(child: Text('Widget 1', style: TextStyle(color: Colors.white))),
              ),
              Container(
                color: Colors.green,
                height: 100,
                width: 100,
                child: Center(child: Text('Widget 2', style: TextStyle(color: Colors.white))),
              ),
              Container(
                color: Colors.blue,
                height: 100,
                width: 100,
                child: Center(child: Text('Widget 3', style: TextStyle(color: Colors.white))),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Complete implementation of column widget

Conclusion

The Column widget in Flutter offers an easier way to arrange multiple children in a vertical layout. We can customize the Column widget using optional named arguments such as child alignment, main axis size, padding, color, and render direction.

However, it’s important to note that one limitation of the Column widget is that it doesn’t support vertical scrolling. Therefore, if the total height of the children exceeds the available screen space, an overflow message will be displayed.

Additional resources

You can learn about other Flutter widgets from the following resources:

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is the difference between Row and column widget in Flutter?

The Row widget arranges its children horizontally, while the Column widget stacks them vertically. Both share properties like mainAxisAlignment and crossAxisAlignment, but the main axis refers to horizontal for Row and vertical for Column. The choice between them depends on the desired layout orientation.

How to add text in a column in Flutter

To add text in a Column widget in Flutter, you use the children property to include multiple Text widgets. Each Text widget represents a line or block of text, which the Column arranges vertically. This approach allows you to stack text elements, along with other widgets if needed, in a vertical layout. You can further customize the appearance of the text using properties like alignment and styling to suit your design requirements.

How to use Column widget in Flutter

Constructor and parameters