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
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, spaceAround, spaceBetween, 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
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
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
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
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
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 baseline, center, 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
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
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
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
With CrossAxisAlignment.stretch
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.
