Flutter Row & Column with 12 Examples

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

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
flutter-row-column-compare

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
flutter-column-example-1

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
flutter-column-example-2

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
flutter-column-example-3

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
flutter-column-example-4

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
column-example-5


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
flutter-row-example-1

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
flutter-row-example-2

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
flutter-row-example-3

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
flutter-row-example-4

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
flutter-row-example-5


Rows & Column Together

Yes, you can merge row & column together to build complex UI.

flutter row column example
flutter row column example

Additional References: