How to add multiple widgets as children in flutter using Column Widget?

Column widget in flutter is used to align the elements vertically. In the User Interface, till now we have added only a single widget. But if you are looking to add the multiple Widgets as children in the vertical direction, then the Column widget is the best option in that use case.

Syntax:

import 'package:flutter/material.dart';
class ColumnWidget extends StatefulWidget {
  @override
  _ColumnWidgetState createState() => _ColumnWidgetState();
}
class _ColumnWidgetState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(255, 250, 250, 1),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Text(
            "I am the first Child of the column",
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          Text("I am the second child of Column",
              style: TextStyle(fontWeight: FontWeight.bold)),
          Text("I am the third child of Column",
              style: TextStyle(fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }
}

We can align the content by using the following properties:

• start : Place the children from the starting of the row.
• end : Place the children at the end of the row.
• center : Place the children at the center of the row.
• spaceBetween : Place the space evenly between the children.
• spaceAround : Place the space evenly between the children and also half of that space before and after the first and last child.
• spaceEvenly : Place the space evenly between the children and also before and after the first and last child.

In the given code above, we have added mainAxisAlignment as a center to place the content of the Column widget in the center alignment.

If we add the mainAxisAlignment value as spaceBetween then the following output will be there,

If we add the mainAxisAlignment value as spaceAround then the following output will be there,

If we add the main axis alignment value as spaceEvenly then the following output will be there,

If we add the mainAxisAlignment value as a start then the following output will be there,

If we add the mainAxisAlignment value as end then following output will be there,

crossAxisAlignment property is used to align the items in X Axis. As you can see, we have added the value of crossAxisAlignment as end in the code, Text widget is displayed in the right direction.

If we add the value of crossAxisAlignment property as a start, it will display the text from the left alignment. Same for the center, it will place the text in the center alignment.

So this was all about how you can add the multiple widgets as children in flutter using the Column Widget and most commonly used properties of Column Widget.

Find more articles in different categories like Web Development, Flutter, Programming languages here at codzify.com/articles