Flutter: How does column layout work?

Layouts are the fundamental starting points for developing Flutter applications. There are many layout options are available by default. I am going to explain column layout in this article.

What is a column layout?

Column layout is one of the core widgets offered by the framework. Column layout constructs its children in a vertical direction (like below). The children positioning will be managed by MainAxisAlignment and CrossAxisAlignment. Column layout will not support the automatic scroll behavior.

When to use?

Column layout will be very useful when your app require to place some widgets in a vertical order (See above image). The child widget can be of another layout to construct a complex user interface.

How to construct column layout?

Below is the simple column layout which contains 4 child widgets in-order to explain the composition. You can use any composing widgets as a child inside the column layout

class ColumnLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _build(context);
  }

  Widget _build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      // crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: Center(
            child: Text('Apple'),
          ),
        ),
        Text('Banana'),
        Text('Guava'),
        Container(
          padding: EdgeInsets.all(10.0),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(
              color: Colors.deepOrange
            )
          ),
          child: Icon(Icons.access_alarm)
        )
      ],
    );
  }
}

The above code will generate the output like the below,

I hope you have got a fair understanding about the column layout now. All the code reference is available under my Github project. You can refer if you need any more details on this.

{ Happy coding }

API Evangelist | Chief Hustler @workrituals.com | Habit Coach | Madras Java User Group Leader
78FollowersFollow
0SubscribersSubscribe

Latest articles

Flutter: How does column layout work?

Layouts are the fundamental starting points for developing Flutter applications. There are many layout options are available by default. I am going...

Flutter: Stateless vs Stateful widgets

Flutter is a mobile application development framework developed by Google. You need to understand the fundamental building blocks before you dig deeper...

Why Flutter is a great technology for makers &...

As per the wikipedia, Flutter is an open source UI development kit created by Google. It is used to...

Why 12-Factory methodology matters to your Microservice development?

The 12-Factor application development methodology and why is it important for your microservices strategy

When to use Firebase Cloud functions?

Recently I got a question from one of the Indie makers that, when to use Firebase Cloud Functions? This...

Similar articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here