☰
CODES INSIDER
Flutter

Flutter Row And Column Widgets

×
×

Spread the love

Table of Contents hide
1 Flutter Row and Column
2 Row Widget In Flutter
3 Column Widget In Flutter
4 How To Create Row & Column in flutter ?
5 Flutter Row & Column Properties
5.1 Flutter Row and Column Widgets MainAxisAlignment
5.2 MainAxisAlignment.start
5.3 MainAxisAlignment.center
5.4 MainAxisAlignment.end
5.5 MainAxisAlignment.spaceBetween
5.6 MainAxisAlignment.spaceEvenly
5.7 MainAxisAlignment.spaceAround
5.8 Flutter Row and Column Widgets CrossAxisAlignment
5.9 CrossAxisAlignment.start
5.10 CrossAxisAlignment.center
5.11 CrossAxisAlignment.End
5.12 CrossAxisAlignment.strech
5.13 Flutter Row and Column Widgets MainAxisSize
5.14 MainAxisSize.min
5.15 MainAxisSize.max

Flutter Row and Column

Row and Column widgets are very useful in designing Flutter Layouts. We can do most of the layout designs using row and Column widgets. We will use a row widget if we want to arrange elements horizontally and a column widget to arrange the elements vertically.

In this tutorial, we will learn how to use row and column widgets in flutter with example. w will also customize the widgets with different properties.

Row Widget In Flutter

A Row is a widget in flutter that displays its children side by side horizontally. If we want a child of the row to expand to full width we have to wrap it in an Expanded widget. A row widget cannot scroll. If you want to display a list of widgets and want them to scroll if there is not enough space consider using listview instead.

Row(
        children:<Widget> [
          Icon(Icons.account_circle,size: 80,),
          Icon(Icons.account_circle,size: 80,),
          Icon(Icons.account_circle,size: 80,),
          Icon(Icons.account_circle,size: 80,),
        ],
      ),
flutter row widget

Column Widget In Flutter

A Column is a widget in flutter that displays its children one after another in the vertical direction. If we want a child of the column to expand to the full height we have to wrap it in an Expanded widget. A column widget cannot scroll. If you want to display a list of widgets and want them to scroll if there is not enough space consider using listview instead. 

Column(
        children:<Widget> [
          Icon(Icons.account_circle,size: 80,),
          Icon(Icons.account_circle,size: 80,),
          Icon(Icons.account_circle,size: 80,),
          Icon(Icons.account_circle,size: 80,),
        ],
      ),
flutter column widget

Both Row and Column in flutter have everything in common so let’s work with both of them at the same time.

How To Create Row & Column in flutter ?

We can create a row or column widget by calling their constructors and providing the required properties. Let’s have a look at the constructors of row and column widgets.

Row Constructor:

Row(

    {Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline,
    List<Widget> children = const <Widget>[]}

)

Column Constructor:

Column(

    {Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline,
    List<Widget> children = const <Widget>[]}

)

Flutter Row & Column Properties

The properties of row and column widgets are the same. Let’s see them below.

  • mainAxisAlignment
  • mainAxisSize
  • crossAxisAlignment
  • textDirection
  • verticalDirection
  • txtBaseline
  • children

Flutter Row and Column Widgets MainAxisAlignment

For a row MainAxis is from left to right which is horizontal and for the column, it’s top to bottom which is vertical.

flutter row column widgets mainaxis

MainAxisAlignment has so many values so let’s have a look at them with examples.

MainAxisAlignment.start

Row

This will make the children align horizontally at the start/left.

Container(
        color: Colors.deepOrangeAccent,
        child:Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
        ],
      ),
      ),
row mainaxisalignment start

Column

This will make the children align Vertically at the top.

Container(
        color: Colors.deepOrangeAccent,
        child:Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
        ],
      ),
      ),
column mainaxisalignment start

MainAxisAlignment.center

Row

This will make the children align horizontally in the center.

Container(
        color: Colors.deepOrangeAccent,
        child:Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
        ],
      ),
      ),
row mainaxisalignment center

Column

This will make the children align vertically in the center.

Container(
        color: Colors.deepOrangeAccent,
        child:Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
        ],
      ),
      ),
column mainaxisalignment center

MainAxisAlignment.end

Row

This will make the children align horizontally at the end.

Container(
        color: Colors.deepOrangeAccent,
        child:Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
        ],
      ),
      ),
row mainaxisalignment end

Column

This will make the children align vertically at the bottom.

Container(
        color: Colors.deepOrangeAccent,
        child:Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
        ],
      ),
      ),
column mainaxisalignment end

MainAxisAlignment.spaceBetween

Row

This creates an equal amount of space between the children.

Container(
        color: Colors.deepOrangeAccent,
        child:Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
        ],
      ),
      ),
row mainaxisalignment spacebetween

Column

This creates an equal amount of space between children.

Container(
        color: Colors.deepOrangeAccent,
        child:Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
        ],
      ),
      ),
column mainaxisalignment spacebetween

MainAxisAlignment.spaceEvenly

This creates space evenly before and after each child, which means the space before the first child will be equal to the space between the first child and second child and so on.

Row

Container(
        color: Colors.deepOrangeAccent,
        child:Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
        ],
      ),
      ),
row mainaxisalignment spaceevenly

Column

Container(
        color: Colors.deepOrangeAccent,
        child:Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
        ],
      ),
      ),
column mainaxisalignment spaceevenly

MainAxisAlignment.spaceAround

This will create an equal amount of space before and after each child.

Row

Container(
        color: Colors.deepOrangeAccent,
        child:Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
        ],
      ),
      ),
row mainaxisalignment spacearound

Column

Container(
        color: Colors.deepOrangeAccent,
        child:Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
          Icon(Icons.account_circle, size: 50),
        ],
      ),
      ),
column mainaxisalignment spacearound

Flutter Row and Column Widgets CrossAxisAlignment

For a row CrossAxis is from top to bottom which is vertical and for the column, it’s left to right which is horizontal. If you observe the MainAxis of a row is equal to the cross-axis of a column and vice versa.

flutter row column widgets crossaxis

CrossAxisAlignment has so many values so let’s have a look at them with examples.

CrossAxisAlignment.start

Row

This will make the children align vertically at the top.

Container(
        color: Colors.deepOrangeAccent,
        child:Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
          ],
        ),
      ),
row crossaxisalignment start

Column

This will make the children align horizontally at the start/left.

Container(
        color: Colors.deepOrangeAccent,
        child:Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
          ],
        ),
      ),
column crossaxisalignment start

CrossAxisAlignment.center

Row

This will make the children align vertically at the center.

Container(
        color: Colors.deepOrangeAccent,
        child:Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
          ],
        ),
      ),
row crossaxisalignment center

Column

This will make the children align horizontally at the center.

Container(
        color: Colors.deepOrangeAccent,
        child:Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
          ],
        ),
      ),
column crossaxisalignmentcenter

CrossAxisAlignment.End

Row

This will make the children align vertically at the bottom.

Container(
        color: Colors.deepOrangeAccent,
        child:Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
          ],
        ),
      ),
row crossaxisalignment end

Column

This will make the children align horizontally at the end.

Container(
        color: Colors.deepOrangeAccent,
        child:Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
          ],
        ),
      ),
column crossaxisalignment end

CrossAxisAlignment.strech

Row

Container(
        color: Colors.deepOrangeAccent,
        child:Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
          ],
        ),
      ),
row crossaxisalignment strech

Column

Container(
        color: Colors.deepOrangeAccent,
        child:Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
          ],
        ),
      ),
column crossaxisalignment strech

Flutter Row and Column Widgets MainAxisSize

It is used to define the size of MainAxis.Its value can be min or max.

MainAxisSize.min

Row

Container(
        color: Colors.deepOrangeAccent,
        child:Row(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
          ],
        ),
      ),
row mainaxissize min

Column

Container(
        color: Colors.deepOrangeAccent,
        child:Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
          ],
        ),
      ),
column mainaxissize min

MainAxisSize.max

Row

Container(
        color: Colors.deepOrangeAccent,
        child:Row(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
          ],
        ),
      ),
row mainaxissize max

Column

Container(
        color: Colors.deepOrangeAccent,
        child:Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
            Icon(Icons.account_circle, size: 50),
          ],
        ),
      ),
column mainaxissize maxstart

That’s all about Flutter Row and Column Widgets in detail with examples. We will see other flutter widgets in the next posts. Have a great day and happy coding!!

Do like and share if you find this post helpful. Thank you!!

Reference: Flutter Official Documentation


Spread the love

Flutter
AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.

Related Posts

2 responses to “Flutter Row And Column Widgets”

  1. Abdullah Fiaz says:
    September 30, 2021 at 1:23 am

    Good Very Good Tutorial

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *