main axis alignment vs cross-axis alignment
For Row:
mainAxisAlignment = Horizontal Axis
crossAxisAlignment = Vertical Axis
For Column:
mainAxisAlignment = Vertical Axis
crossAxisAlignment = Horizontal Axis
Example 1:
import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return DemoAppState();
}
}
class DemoAppState extends State<DemoApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 70,
width: 50,
color: Colors.blueAccent,
),
Container(
height: 90,
width: 50,
color: Colors.cyanAccent,
),
Container(
height: 110,
width: 50,
color: Colors.orangeAccent,
),
],
),
), //
),
);
}
}
Example 2:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: 70,
width: 50,
color: Colors.blueAccent,
),
Container(
height: 90,
width: 50,
color: Colors.cyanAccent,
),
Container(
height: 110,
width: 50,
color: Colors.orangeAccent,
),
],
),
Example 3:
Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 70,
width: 50,
color: Colors.blueAccent,
),
Container(
height: 90,
width: 50,
color: Colors.cyanAccent,
),
Container(
height: 110,
width: 50,
color: Colors.orangeAccent,
),
],
),
Example 4:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 70,
width: 50,
color: Colors.blueAccent,
),
Container(
height: 90,
width: 50,
color: Colors.cyanAccent,
),
Container(
height: 110,
width: 50,
color: Colors.orangeAccent,
),
],
),
Example 5:
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
height: 70,
width: 50,
color: Colors.blueAccent,
),
Container(
height: 90,
width: 50,
color: Colors.cyanAccent,
),
Container(
height: 110,
width: 50,
color: Colors.orangeAccent,
),
],
),
Video Link: