Flutter Row Implementation

Flutter Row Implementation : A Complete Overview

There is a Row widget in Flutter that allows you to arrange the widgets horizontally. It accepts children in a Horizontal array. In this complete guide, you will learn the implementation of the Flutter Row widget.

How to create a Row in Flutter?

To create a row in flutter you have to use the Row() class. Inside the class you can call the children property to add an array of widgets. It can be anything like container, row, column, stack e.t.c. Below is the code that creates the Row widget inside the Container.

Container(
            color:Colors.blueGrey,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            width:500,
            height: 200,
            child: Row(          
              children: [
                Text("Hello",style: TextStyle(color: Colors.white,fontSize: 50)),         
              ],
            ),
          ),

Output

Creating Flutter Row
Creating Flutter Row

How to use Flutter Row Widget?

There are different you can manipulate the row widgets. For this, the Row() class has provided many properties. You will know all of them here.

1 . children

The children property allows you to add an array of widgets. It can be anything like container, row, column, stack e.t.c. You can see in the above figure, During the creation of the row widget, I have added a Text() widget in the children array.

2. mainAxisAlignment

The second import property is the mainAxisAlignmet. It allows you to place the children in different positions horizontally. The children of the row can be placed using the MainAxisAlignment enum. The enum contains start, end, center, end, spaceAroundspaceBetween, and spaceEvenly. You will know the implementation of each of them. By default, the row has set the mainAxisAlignment to start which is MainAxisAlignment.start.

1. Center the children

To center the children inside the row you have to use MainAxisAlignment.center.

Container(
            color:Colors.teal,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            width:500,
            height: 200,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("Hello",style: TextStyle(color: Colors.white,fontSize: 50)),
              ],
            ),
          ),

Output

Center the children of the row widget
Center the children of the row widget

2. Place the children at the end

You can place the children of the Row Widget to the end using the MainAxisAlignment.end.

Container(
            color:Colors.teal,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            width:500,
            height: 200,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Text("Hello",style: TextStyle(color: Colors.white,fontSize: 50)),
              ],
            ),
          ),

Output

Placing the children to the end of the row widget
Placing the children to the end of the row widget

3. Place the space around the widgets

Suppose you have more than one widget inside the row and want to give space around the widgets then you will use MainAxisAlignment.spaceAround.

Container(
            color:Colors.teal,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            width:500,
            height: 200,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text("Hello",style: TextStyle(color: Colors.white,fontSize: 50)),
                Text("Code",style: TextStyle(color: Colors.black,fontSize: 50)),
              ],
            ),

Output

adding space around the widgets
adding space around the widgets

You can see space is filled around all the children’s widgets.

4. Place the space between the widgets

You can add space between the widgets using the MainAxisAlignment.spaceBetween.

Container(
            color:Colors.teal,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            width:500,
            height: 200,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("Hello",style: TextStyle(color: Colors.white,fontSize: 50)),
                Text("Code",style: TextStyle(color: Colors.black,fontSize: 50)),
              ],
            ),
          ),

Output

Adding space between the widgets
Adding space between the widgets

5 . Placing the space between the widgets Evenly

If you apply the MainAxisAlignment.spaceEvenly, then it will add even space between, before, and after the children widgets.

Container(
            color:Colors.teal,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            width:500,
            height: 200,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text("Hello",style: TextStyle(color: Colors.white,fontSize: 50)),
                Text("Code",style: TextStyle(color: Colors.black,fontSize: 50)),
                Text("Program",style: TextStyle(color: Colors.black,fontSize: 50)),
              ],
            ),
          ),

Output

Adding evenly space to the widgets
Adding evenly spaced to the widgets

3. crossAxisAlignment

The third property you can use is the crossAxisAlignment.  It allows arranging the children’s widgets vertically. The children of the Row can be positioned vertically using the CrossAxisAlignment enum. The enum contains baselinecenter, end, start, and stretch. You will know implement of each enum. By default, the children are aligned to the center vertically which is CrossAxisAlignment.center.

1. Place the children at the start

You can place the children or widgets to the start vertically using the CrossAxisAlignment.start. It will place the top of the widget left corner of the Container.

Container(
            color:Colors.teal,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            width:500,
            height: 200,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("Hello",style: TextStyle(color: Colors.white,fontSize: 50)),

              ],
            ),
          ),

Output

Placing the children at the start vertically
Placing the children at the start vertically

2. Place the children at the end

If you use CrossAxisAlignment.end then the children will align to the end vertically. The “Hello” text will appear in the bottom left corner of the container.

Container(
            color:Colors.teal,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            width:500,
            height: 200,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text("Hello",style: TextStyle(color: Colors.white,fontSize: 50)),
              ],
            ),
          ),

Output

Placing the children at the end vertically
Placing the children at the end vertically

3. Place the children at the center

Now if you want to place the children or widgets to the center then use CrossAxisAlignment.center. It is same as the placing the widget to the center using MainAxisAlignment.start.

Container(
            color:Colors.teal,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            width:500,
            height: 200,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text("Hello",style: TextStyle(color: Colors.white,fontSize: 50)),
              ],
            ),
          ),

Output

Placing the children at the center vertically
Placing the children at the center vertically

4. Fill the children across the cross axis

Sometimes you want to fill the entire space for the children. For example, I have a text widget inside the container. If I use CrossAxisAlignment.stretch then the entire container will be stretch.

Container(
            color:Colors.teal,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            width:500,
            height: 200,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                    child:Text("Hello",style: TextStyle(color: Colors.white,fontSize: 50)),
                  color: Colors.red,
                ),

Without CrossAxisAlignment.stretch

Container not stretched
Container not stretched

With CrossAxisAlignment.stretch

Streching the container along cross axis
Stretching the container along the cross axis

These are the generally used properties that you will implement all the time when you design the flutter UI. I hope you have liked this complete overview on how to use flutter row. If you have any questions then you can contact us for more help.

Code The Best
Hi, I am CodeTheBest. Here you will learn the best coding tutorials on the latest technologies like a flutter, react js, python, Julia, and many more in a single place.