Flutter Align Widget in Android iOS Explained with Example

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.

Flutter Align Widget in Android iOS Explained with Example

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.

2. Create void main runApp() method and here we would call our main MyApp class.

3. Creating our main MyApp class extends with State less widget.

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.

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.

6. Complete source code for main.dart file:

Screenshots:

Leave a Reply

Your email address will not be published. Required fields are marked *