In today’s tutorial we would learn about Flutter MainAxisAlignment and its sub properties like center, end, space around, space between, space evenly and start. MainAxisAlignment is a property of Column widget. It is used to arrange children widgets into vertically format according to given axis. Today we would use the Column widget and make children widget into single column format in flutter. So in this tutorial we would learn about Flutter Column MainAxisAlignment Properties Explained in Android iOS with Example.
Contents in this project Flutter Column MainAxisAlignment Properties Explained with Example:
Note:- Given below all the examples is with CrossAxisAlignment.center in Column widget.
1. MainAxisAlignment.start :- Place all the given children as close at the start as possible to main axis.
2. MainAxisAlignment.center :- Place all the children of Column widget in center as close as possible.
3. MainAxisAlignment.end :- Place the children as close as to the end of main axis.
4. MainAxisAlignment.spaceAround :- Place the free space evenly between the children widget as well as half of that space before and after the first and last child widget.
5. MainAxisAlignment.spaceBetween :- Place the free space evenly between the children widget.
6. MainAxisAlignment.spaceEvenly :- Place the free space evenly between the children widget as well as before and after the first widget and last child widget.
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: <Widget>[ Container( color: Colors.greenAccent, width: 100.0, height: 100.0, ), Container( color: Colors.pinkAccent, width: 100.0, height: 100.0, ), Container( color: Colors.lightBlueAccent, width: 100.0, height: 100.0, ), ], ), ))); } } |