Test your Programming knowledge

50% users failed to get the best score. It's your turn to test now.
Questions curated by the expert mentors at codzify.com

Start Quiz

Article

How to pass 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 single widget. But if you are looking to add the multiple Widgets as children in vertical direction, then 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 center to place the content of the Column widget in the center alignment.

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

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

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

If we add the mainAxisAlignment value as  start then 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 start, it will display the text from the left alignment. Same for 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.

 

Recommended Articles

Did you found this article helpful?

Try to execute what you have learnt

Easy to use online data structure compiler where you can execute the programs in your favourite programming language.
(C, C++, Python)

Open Compiler

HTML, CSS and Javascript Real time Web Editor

Execute your HTML, CSS and javascript code in real time with the web editor
(HTML, CSS, Bootstrap, Javascript)

Open Web Editor