Column Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
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 - Flutter widget Guide By Flutter Agency

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.

MainAxis

 mainAxisAlignment: MainAxisAlignment.center

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

mainAxis-Start

mainAxisAlignment: MainAxisAlignment.start

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

Now,our output will look like below :

Column-Space

 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 :

Column-Space-Around

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.

Column-Space-Evenly

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 GuideFlutter ProjectsCode 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.

Leave a Reply