Flutter Course, 7.4 Placing Child Widgets Inside the Column Widget

Flutter is a UI toolkit developed by Google that helps create mobile, web, and desktop applications easily. In this article, we will take a closer look at one of Flutter’s key widgets, the Column widget, and explain how to arrange child widgets using it.

1. Introduction to the Column widget

The Column widget is a basic layout widget used in Flutter to arrange child widgets in a vertical direction. This widget arranges multiple child widgets vertically, and their positions are automatically aligned according to the given layout. The Column widget is very useful and can include various types of child widgets. For example, text, images, buttons, and other widgets can be listed vertically.

2. Basic usage of the Column widget

The Column widget can be defined in the following format:

Column(
  children: [
    Text('First Widget'),
    Text('Second Widget'),
    Icon(Icons.star),
  ],
)

As seen in the code above, the child widget list is passed to the children property of the Column widget. These child widgets are arranged from top to bottom.

3. Key properties of the Column widget

When using the Column widget, the following key properties can be utilized:

  • mainAxisAlignment: Specifies the alignment of the main axis (vertical direction). For example, you can set to center alignment, start alignment, end alignment, and more.
  • crossAxisAlignment: Sets the alignment of the cross axis (horizontal direction). It is used to adjust the horizontal alignment of child widgets.
  • mainAxisSize: Used to adjust the height of the Column. Setting MainAxisSize.min allows this widget to occupy only the minimum space needed to fit its child widgets’ height.

4. Example: Using the basic Column widget

Let’s learn the basic usage of the Column widget through a simple example. Here is a simple Column widget containing two texts and an icon:

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('Example of Column Widget')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('First Widget', style: TextStyle(fontSize: 24)),
            Text('Second Widget', style: TextStyle(fontSize: 24)),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),
    );
  }
}

When the above code is executed, you will see two texts and one icon arranged vertically at the center of the device screen.

5. Aligning child widgets

You can adjust the alignment of child widgets using the mainAxisAlignment and crossAxisAlignment properties. For example, to center all child widgets, you can set the mainAxisAlignment to MainAxisAlignment.center.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('First Widget', style: TextStyle(fontSize: 24)),
    Text('Second Widget', style: TextStyle(fontSize: 24)),
    Icon(Icons.star, size: 50),
  ],
)

When the above code is executed, all child widgets will be centered on the screen while the texts will be left-aligned.

6. Applying Padding to the Column widget

You can use the Padding widget to add space to the Column widget. Adding padding creates a cleaner layout by spacing out each child widget.

Padding(
  padding: EdgeInsets.all(16.0),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('First Widget', style: TextStyle(fontSize: 24)),
      Text('Second Widget', style: TextStyle(fontSize: 24)),
      Icon(Icons.star, size: 50),
    ],
  ),
)

In the above code, 16 pixels of padding have been added to the entire Column widget. This allows for a stable layout while maintaining spacing between the child widgets.

7. Adding other widgets inside the Column

Other widgets such as Row, Container, etc., can be added as children within the Column widget. In this case, the child widgets will follow the rules of the Column. Here’s an example with multiple Rows inside a Column:

Column(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Row 1 - Widget 1'),
        Text('Row 1 - Widget 2'),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Row 2 - Widget 1'),
        Text('Row 2 - Widget 2'),
      ],
    ),
  ],
)

The code above is an example of placing two Rows inside a Column. Each Row lists text widgets horizontally.

8. Column and Expanded widget

When you want to adjust the space for child widgets more flexibly, you can use the Expanded widget. The Expanded widget allows its child widget to take up all the available space. Here’s an example of using Column with Expanded:

Column(
  children: [
    Expanded(
      child: Container(color: Colors.red),
    ),
    Expanded(
      child: Container(color: Colors.green),
    ),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

Using this code, the screen is divided into three containers of equal height, each representing the colors red, green, and blue.

9. Sample application using Column

Now let’s create a simple application utilizing the Column widget. Below is the entire code for implementing the expected UI:

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('Example of Column Widget')),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text('Flutter Column Widget', style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold)),
              Expanded(child: Container(color: Colors.red)),
              Expanded(child: Container(color: Colors.green)),
              Expanded(child: Container(color: Colors.blue)),
              RaisedButton(onPressed: () {}, child: Text('Button')),
            ],
          ),
        ),
      ),
    );
  }
}

When the above code is executed, a screen appears with a title text at the top, three containers of different colors in the center, and a button at the bottom. This layout is an effective example of utilizing the Column widget.

10. Conclusion

In this post, we learned in detail about the Column widget. The Column widget is a very useful tool in Flutter, widely used for arranging child widgets vertically. You can finely adjust the layout by applying properties like mainAxisAlignment and crossAxisAlignment, and implement various UIs by combining it with other widgets.

By learning how to combine widgets in Flutter, you can easily create more complex layouts. In the future, I will provide more information and assistance through various tutorials on Flutter widgets. Thank you!