What are Row and Column widgets in Flutter?

• General

Row and Column are the two most important and powerful widgets in Flutter. So, in this article, we will see what are Row and Column widgets in Flutter.

What are Row and Column widgets in Flutter?

The row & column widget in Flutter allows you to align children horizontally & vertically. When we design any UI in a flutter, we need to arrange its content in the Row & Column manner. So, we use Row and Column widgets when designing U.I. in Flutter.

Properties of Row and Column Widgets:

• children: This property takes in List<Widget>. It is a list of widgets to display inside the Row or the Column widget.
• clipBehaviour: This property holds the Clip class as the object. It decides whether the content should be clipped or not on the Row or Column.
• crossAxisAlignment: The crossAxisAlignment takes in CrossAxisAlignment enum as the object. It decides how the children’s widgets should be places in crossAxisAlignment. For Row it is vertical and for Column it is horizontal.
• direction: This property holds as the Axis enum object to decide the direction used in the main axis. It is fixed for Row and Column.
• mainAxisAlignment: This property takes in MainAxisAlignment enum as the object. It decides how the children’s widgets should be placed in the mainAxisAlignment. For Row it is horizontal and for Column it is vertical.
• mainAxisSize: This property decides the size of the main-axis by taking in MainAxisSize enum as the object.
• runtimeType: This property tells the run-time type of the Row or Column widget.
• textBaseline: This property is responsible for the alignment of the text in the Row or Column widget with respect to a baseline.
• textDirection: This property controls the text direction of the Row or Column widget. It can either be from left-to-right (by default) or right-to-left.
• verticalDirection: This property takes in VerticalDirection enum as the object to determine the order in which the children should be layered.

Row:

It creates a horizontal array of children.

Alignment Properties: We can align content as per our choice by using mainAxisAlignment and crossAxisAlignment. Row’s mainAxis is horizontal and cross Axis to Row’s main Axis is vertical. Also, we can align children horizontally using MainAxisAlignment and vertically using CrossAxisAlignment in that row. 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.

So, now we will see the difference with the help of examples. Let’s suppose we want to align content such that there is space around the children in a row :

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'XYZ',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Widget in Flutter"),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children:<Widget>[
Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(10),
color:Colors.green
),
child: Text("Default",style: TextStyle(color:Colors.white,fontSize:25),),
),
Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(10),
color:Colors.green
),
child: Text("Text",style: TextStyle(color:Colors.white,fontSize:25),),
),
Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(10),
color:Colors.green
),
child: Text("Flutter",style: TextStyle(color:Colors.white,fontSize:25),),
)
]
),
);
}
}

Column:

It creates a vertical array of children.

Alignment Properties: In this also we have mainAxisAlignment and crossAxisAlignment. Children are aligned from top to bottom in the column. So, Main Axis is vertical and the Cross Axis is horizontal. MainAxisAlignment aligns its children vertically and CrossAxisAlignment aligns horizontally in that Column.

Also, we can align the content by using the same properties as discussed above in Row (start, end,spaceBetween,spaceAround,spaceEvenly). We will see the difference with the help of examples. Let’s suppose we want to align content so that we have space around the children. Assign mainAxisAlignment as spaceAround as shown below:

Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children:<Widget>[
Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(10),
color:Colors.green
),
child: Text("Widget in Flutter",style: TextStyle(color:Colors.white,fontSize:25),),
),
Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(10),
color:Colors.green
),
child: Text("Flutter Agency",style: TextStyle(color:Colors.white,fontSize:25),),
),
Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(10),
color:Colors.green
),
child: Text("Flutter Agency",style: TextStyle(color:Colors.white,fontSize:25),),
)
]
),

Drawbacks:

• The row has no horizontal scrolling. So, when a large number of children are inserted in a single row that is not able to fit in the row then it will give us an Overflow message (for ex: Right overflowed by 560px ).
• The column has no vertical scrolling. So, when a large number of children are inserted in a single Column whose total children size is more than the total height of the screen then it will give us an Overflow message (for ex: Bottom overflowed by 684px).

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen what are Row and Column widgets in Flutter. Also, feel free to comment and provide any other suggestions regarding Flutter tips & tricks.

Flutter Agency 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.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.