Understanding Row & Column in Flutter

COLUMN:
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,
),
],
),
),

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://softzone.com/logo.png"),
radius: 28,
),
Text("SOFTZONE"),
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

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")
],
),
),
),