As a part of the flutter tutorial series, we’re going to learn row and column with example. In flutter development row and column are playing a very important role in UI design. let’s explore it
![flutter-row-column-tutorial](https://codesundar.com/wp-content/uploads/2020/12/flutter-row-column.png)
Row & Column comparison
Column | Row |
MultiChild Widget | MultiChild Widget |
Align all Children Widgets in a vertical direction | Align all children Widgets in a horizontal direction |
![flutter-row-column-compare](https://codesundar.com/wp-content/uploads/2020/11/flutter-row-column-compare.png)
Exploring Column Widget
As said before, the column widget aligns the children’s widget vertical direction. To change the UI, we need to play with CrossAxisAligment & MainAxisAlignment. In the Column widget, MainAxisAligment will be in the vertical direction & CrossAxisAligment in the horizontal direction.
Container(
color: Colors.grey[300],
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 50,
width: 50,
color: Colors.red,
),
Container(
height: 50,
width: 50,
color: Colors.green,
),
Container(
height: 50,
width: 50,
color: Colors.blue,
),
],
),
),
Column Example 1
![flutter-column-example-1](https://codesundar.com/wp-content/uploads/2020/11/flutter-column-example-1.png)
In the above example, we Fixed MainAxisAligment in the start position and changed CrossAxisAligment as a start, center, and end position.
Flutter Column Example 2
![flutter-column-example-2](https://codesundar.com/wp-content/uploads/2020/11/flutter-column-example-2.png)
In the above example, we Fixed MainAxisAligment in the center position and changed CrossAxisAligment as a start, center, and end position.
Flutter Column Example 3
![flutter-column-example-3](https://codesundar.com/wp-content/uploads/2020/11/flutter-column-example-3.png)
In the above example, we Fixed MainAxisAligment in the end position and changed CrossAxisAligment as a start, center, and end position.
Flutter Column Example 4
![flutter-column-example-4](https://codesundar.com/wp-content/uploads/2020/11/flutter-column-example-4.png)
In the above example, we Fixed CrossAxisAligment in the center position and changed MainAxisAligment.
MainAxisAlignment.spaceBetween: First & Last widget no space & space between inner widgets
MainAxisAlignment.spaceAround: All widgets wrapped with some space around.
MainAxisAlignment.spaceEvenly: All widgets wrapped with equal space
Column Example 5
![column-example-5](https://codesundar.com/wp-content/uploads/2020/11/column-example-5.png)
Exploring Row Widget
As said before, the row widget aligns children widget horizontal direction. To change the UI, we need to play with CrossAxisAligment & MainAxisAlignment. In the Row widget, MainAxisAligment will be in the horizontal direction & CrossAxisAligment in the vertical direction.
Container(
color: Colors.grey[300],
width: double.infinity,
height: double.infinity,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 50,
width: 50,
color: Colors.red,
),
Container(
height: 50,
width: 50,
color: Colors.green,
),
Container(
height: 50,
width: 50,
color: Colors.blue,
),
],
),
),
Flutter Row Example 1
![flutter-row-example-1](https://codesundar.com/wp-content/uploads/2020/11/flutter-row-example-1.png)
In the above example, we Fixed CrossAxisAligment in the start position and changed MainAxisAligment as a start, center, and end position.
Flutter Row Example 2
![flutter-row-example-2](https://codesundar.com/wp-content/uploads/2020/11/flutter-row-example-2.png)
In the above example, we Fixed CrossAxisAligment in the center position and changed MainAxisAligment as a start, center, and end position.
Flutter Row Example 3
![flutter-row-example-3](https://codesundar.com/wp-content/uploads/2020/11/flutter-row-example-3.png)
In the above example, we Fixed CrossAxisAligment in the end position and changed MainAxisAligment as a start, center, and end position.
Flutter Row Example 4
![flutter-row-example-4](https://codesundar.com/wp-content/uploads/2020/11/flutter-row-example-4.png)
In the above example, we Fixed CrossAxisAligment in the center position and changed MainAxisAligment.
MainAxisAlignment.spaceBetween: First & Last widget no space & space between inner widgets
MainAxisAlignment.spaceAround: All widgets wrapped with some space around.
MainAxisAlignment.spaceEvenly: All widgets wrapped with equal space
![flutter-row-example-5](https://codesundar.com/wp-content/uploads/2020/11/row-example-5.png)
Rows & Column Together
Yes, you can merge row & column together to build complex UI.
![flutter row column example](https://codesundar.com/wp-content/uploads/2020/11/row-column-example.png)
Additional References: