In this article, we’re going to learn how to use rows & columns in a flutter with an example. This Topic is very very important in flutter development, without Rows & Columns you cannot build UI.
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 |
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
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
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
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
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 Simple Button
Center(
child: Container(
height: 100,
width: 100,
child: TextButton(
onPressed: () {},
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.android),
Text("Android"),
],
),
),
),
),
Contact Card
Center(
child: Container(
height: 200,
width: 200,
color: Colors.blueGrey[200],
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CircleAvatar(
backgroundImage: NetworkImage(
"https://codesundar.com/wp-content/uploads/2020/08/78494341_2774884842574595_7784880823911579648_n-300x300.jpg"),
radius: 28,
),
Text("CODESUNDAR"),
Text("Learn flutter easily"),
ElevatedButton(
onPressed: () {},
child: Text("Start"),
)
],
),
),
),
Blog Post
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 200,
width: double.infinity,
child: Image.network(
"https://i.pinimg.com/originals/87/b6/e3/87b6e3ebf4d64dc72392e50a9f74bf84.jpg",
fit: BoxFit.cover,
),
),
Container(
child: Text(
"Heavy Rain is predicted during this summer",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 8),
Text("Posted 5 mins ago"),
SizedBox(height: 8),
Container(
child: Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. "),
)
],
),
),
),
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
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
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
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
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
Row Simple Button
Center(
child: Container(
width: 120,
child: ElevatedButton(
onPressed: () {},
child: Row(
children: [
Icon(Icons.android),
Text("Press Me"),
],
),
),
),
),
Row Counter Example
Center(
child: Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
OutlinedButton(
onPressed: () {},
child: Icon(Icons.add),
),
Text("10"),
OutlinedButton(
onPressed: () {},
child: Icon(Icons.remove),
),
],
),
),
),
Row Product Card Example
Container(
padding: EdgeInsets.all(16.0),
child: Container(
color: Colors.grey[400],
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
width: 80,
height: 80,
child: Image.network(
"https://i.pinimg.com/originals/87/b6/e3/87b6e3ebf4d64dc72392e50a9f74bf84.jpg",
fit: BoxFit.cover,
),
),
Container(
child: Text(
"Umberla For Sale",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
Text("5 USD")
],
),
),
),
Rows & Column Together
Yes, you can merge row & columns together to build complex UI.
Row & Column Example 1
Center(
child: Container(
color: Colors.white,
width: 240,
height: 300,
child: Column(
children: [
Container(
height: 160,
width: double.infinity,
child: Image.network(
"https://i.pinimg.com/originals/87/b6/e3/87b6e3ebf4d64dc72392e50a9f74bf84.jpg",
fit: BoxFit.cover,
),
),
Container(
padding: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Umberla for sale",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
SizedBox(height: 4),
Text("200 bought this")
],
),
),
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("4.5"),
Icon(
Icons.star,
size: 14,
),
],
),
)
],
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
child: Text("Add To Cart"),
onPressed: () {},
),
ElevatedButton(
child: Text("Buy Now"),
onPressed: () {},
),
],
),
),
],
),
),
),
Row & Column Example 2
Center(
child: Container(
color: Colors.white,
width: double.infinity,
height: 100,
padding: EdgeInsets.all(8),
margin: EdgeInsets.all(12),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 80,
width: 80,
child: Image.network(
"https://i.pinimg.com/originals/87/b6/e3/87b6e3ebf4d64dc72392e50a9f74bf84.jpg",
fit: BoxFit.cover,
),
),
SizedBox(width: 8),
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Umberla for sale",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
SizedBox(height: 4),
Text("200 bought this")
],
),
),
),
SizedBox(width: 8),
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("4.5"),
Icon(
Icons.star,
size: 14,
),
],
),
)
],
),
),
),
Row & Column Example 3
Center(
child: Container(
color: Colors.white,
width: double.infinity,
height: 308,
margin: EdgeInsets.all(20),
child: Column(
children: [
Container(
padding: EdgeInsets.all(12.0),
child: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
"https://codesundar.com/wp-content/uploads/2020/08/78494341_2774884842574595_7784880823911579648_n-300x300.jpg"),
radius: 20,
),
SizedBox(
width: 8.0,
),
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("SUNDARAVEL M"),
Text("5 mins ago"),
],
),
),
),
SizedBox(
width: 8.0,
),
Icon(Icons.more_vert),
],
),
),
Container(
height: 200,
width: double.infinity,
child: Image.network(
"https://i.pinimg.com/originals/87/b6/e3/87b6e3ebf4d64dc72392e50a9f74bf84.jpg",
fit: BoxFit.cover,
),
),
SizedBox(height: 8),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
child: Row(
children: [Icon(Icons.thumb_up), Text("Like")],
),
),
Container(
child: Row(
children: [Icon(Icons.comment), Text("Comment")],
),
),
Container(
child: Row(
children: [Icon(Icons.share), Text("Share")],
),
)
],
),
),
],
),
),
),
Additional References: