Align widget in flutter is used to Align given child within itself. The align widget has 9 sub alignment properties. We would discuss all of them in our tutorial. Align widget can have all the space defined by its parent and cover the area. Once user create a Container or other widget as Child widget of Align widget, user can specify the alignment of child widget. So in this tutorial we would learn about Flutter Align Widget in Android iOS Explained with Example in Dart.
List of all Align properties:
1. Alignment.topLeft – Position child in top left corner.
2.Alignment.topCenter – Position child in top center of space.
3. Alignment.topRight – Position child in top right corner.
4. Alignment.centerLeft – Set the child in Center left.
5. Alignment.center – Set the child in vertically horizontally center.
6. Alignment.centerRight – Set the child in center right.
7. Alignment.bottomLeft – Position the child in bottom left corner.
8. Alignment.bottomCenter – Position the child in bottom center.
9. Alignment.bottomRight – Position the child in bottom right corner.
Contents in this project Flutter Align Widget in Android iOS Explained with Example:
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp class extends with State less widget.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build area -> Material App -> Scaffold widget -> Safe Area widget -> SingleChildScrollView -> Column widget. We would make all the Align widgets as child of Column widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: SingleChildScrollView( child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: [ ], ))))); } |
5. Creating 9 Container widget with fixed width of 400 pixels and height of 200 pixels. Now we would make the Align widget as child of Container widget and make another container widget as Align widget child.
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.topLeft, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.topCenter, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.topRight, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.centerLeft, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.center, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.centerRight, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.bottomLeft, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.bottomCenter, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.bottomRight, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), |
6. 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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
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: SingleChildScrollView( child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: [ Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.topLeft, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.topCenter, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.topRight, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.centerLeft, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.center, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.centerRight, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.bottomLeft, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.bottomCenter, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), Divider(color: Colors.red, height: 10, thickness: 3), Container( width: 400, height: 200, color: Colors.blueAccent, child: Align( alignment: Alignment.bottomRight, child: Container( padding: const EdgeInsets.all(0.0), color: Colors.lightGreenAccent, width: 100.0, height: 100.0, ))), ], ))))); } } |
Screenshots:
