Column Widget – Flutter Widget Guide By Flutter Agency

Column Widget – Flutter Widget Guide By Flutter Agency

I hope you have been through our last article in which we have discussed Row Widget and it’s a property in a detail. So now in this article, we will discuss the Column Widget.

What is Column Widget?

A Column Widget is a widget where the elements or child are arranged vertically like a column. Define all widgets within Column Widget like below.

Column(
children: [
Widget1,
Widget2,
],)

Now we will place three Container Widgets in a Column Widget so that you can understand it properly. The code snippet will look like below :

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
            color: Colors.orangeAccent,
            child: Center(
              child: Text("Widget1"),
            )),
        Container(
            color: Colors.white,
            child: Center(
              child: Text("Widget2"),
            )),
        Container(
            color: Colors.green,
            child: Center(
              child: Text("Widget3"),
            ))
      ],
    );

Which will generate output like below :

Column Widget

Column arranges all its widgets or changes in a vertical manner like a column. The Column has a Y-Axis as the main Axis and X-Axis as cross Axis. Just Like Row Widget a Column also has all the same property.

We will discuss every parameter here in detail.

 Icon(
     Icons.favorite,
     color: Colors.pink,
     size: 50.0,
     ),

RaisedButton (
              child: const Text('Button'),
              color: Colors.blue,
              elevation: 4.0,
              splashColor: Colors.yellow,
              onPressed: () {
                // do something
              },
            ),

• Center : Arrange the children as near to the middle of the main axis as possible.

 mainAxisAlignment: MainAxisAlignment.center

• Start : Start Parameter will put a children as near to the start of the main axis as possible.

mainAxisAlignment: MainAxisAlignment.start

• spaceBetween: spaceBetween will put a free space evenly between the children.

Now,our output will look like below :

 mainAxisAlignment: MainAxisAlignment.spaceBetween

• SpaceAround : Space Around will put a free space evenly between the children as well as half of that space before and after the first and last child. In our case we will have output as below :

mainAxisAlignment: MainAxisAlignment.spaceAround

• SpaceEvenly : Space Evenly will put a free space evenly between the children as well as before and after the first and last child.

mainAxisAlignment: MainAxisAlignment.spaceEvenly

That’s it for today !!!
Do not forget to comment and gives us feedback on articles that will help us to serve you better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.