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