In today’s tutorial we would learn about MainAxisAlignment and its properties along with Row widget. Row widget is used to set given widgets or items into a single Row format. Today we would learn about MainAxisAlignment which is used to set all the children array in horizontal format. The MainAxisAlignment has 6 different properties named as start, center, end, space around, space between and space evenly. We would learn about all of them in today’s tutorial. Flutter Row MainAxisAlignment Properties Explained with Example in Android iOS.
Contents in this project Flutter Row MainAxisAlignment Properties Explained with Example:
Note:- Given below all the examples is with CrossAxisAlignment.center in Row widget.
1. MainAxisAlignment.start :- Place all the given children as close at the start as possible to main axis.
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: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.end, 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, ), ], ), ))); } } |