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

Basic


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.

 

How was the tutorial? Nice. Right?



Deep Concept videos to crack the highly-piad interviews.

Chekout out our Youtube Channel to get detailed video content on important topics in interviews.



What is your Interview Score?

Test your skillset with the curated questions created by experts around the globe.

Book a free test slot. Now !.

It usually takes 30 mins for an online test and this test will be MCQ based. Get detailed analytics based on your test and recommedations with personalised roadmaps.

Book a test slot. Now!

Have questions about the trial coding class?

Chat with our experts to discuss

Connect on WhatsApp


Recommended tutorials

#online compiler for c     #python for programming    

#dfs and bfs algorithm     #programming with c language

#storageclass in C    #listcomprehension in python