Contents
Align Widget in Flutter
Align Widget in Flutter introduces an easy way to create and implement alignments of a Widget over another. The Align Widget in itself acts as a container and holds a widget. It contains different properties that help it to define how the child Widget should be aligned over its parent.
In this tutorial, we will see how to create a simple and effective Align Widget and use it across the application.
As always, use the below template to create the basic structure quickly.
import 'dart:async'; import 'package:flutter/material.dart'; void main() => runApp(DividerApp()); class AlignmentApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Sample Alignment Widget', home: AlignmentWidget(), ); } } class AlignmentWidget extends StatefulWidget { AlignmentWidget({Key key}) : super(key: key); @override _AlignmentWidgetState createState() => _AlignmentWidgetState(); } class _AlignmentWidgetState extends State<AlignmentWidget> { @override void initState() { super.initState(); } @override Widget build(BuildContext context) { return Scaffold(); } }
Align Widget – Basics
To start with the Align Widget in Flutter. Use the Align
Class in Flutter. There are 3 important attributes that the Align uses. They are,
alignment
The alignment attribute makes use of the Alignment Class and defines where the child widget should be placed at. This way, the logic behind the alignment is to create a simple coordinate system that can overlap the center of the Child widget of the Align with the position specified in the alignment!
Sample alignment attribute is,
Align(
alignment: Alignment.bottomRight
)
To understand this better, check out the example app in the next section.
child
The Child widget just as any other property can take in any Widget as its child. Like mentioned in the previous section, the Align Class by itself acts as a simple placeholder that adjusts its child based on the alignment position. Sample example is given in the below code,
Align(
alignment: Alignment.bottomRight,
child:FlutterLogo
)
heightFactor
As given in the doc, “If non-null, sets its height to the child’s height multiplied by this factor”.This way the alignment can be given a consistency across the height. It takes in a double value and it can be used as given below.
Align(
alignment: Alignment.bottomRight,
child:FlutterLogo,
heightFactor: 0.5
)
widthFactor
Similar to how the heightFactor works, the widget can also be manipulated. Takes in a double value and can be used as below,
Align(
alignment: Alignment.bottomRight,
child:FlutterLogo,
widthFactor: 0.5
)
Align Widget – Example
The below code is used as an example to show how the Align Class can be used across the Flutter App.
A lot of different positions and values are given to illustrate the same.
import 'dart:async'; import 'package:flutter/material.dart'; void main() => runApp(AlignmentApp()); class AlignmentApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Sample Divider Widget', home: AlignmentWidget(), ); } } class AlignmentWidget extends StatefulWidget { AlignmentWidget({Key key}) : super(key: key); @override _AlignmentWidgetState createState() => _AlignmentWidgetState(); } class _AlignmentWidgetState extends State { @override void initState() { super.initState(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample Align App"), ), body: Center(child: Column( children: [ Container( color: Colors.yellowAccent, height: 150.0, width:150.0, child: Align( alignment: Alignment.bottomRight, child: FlutterLogo( size: 60.0, ), ), ), Container( color: Colors.greenAccent, height: 150.0, width:150.0, child: Align( alignment: Alignment.bottomCenter, child: FlutterLogo( size: 60.0, ), ), ), Container( color: Colors.redAccent, height: 150.0, width:150.0, child: Align( alignment: Alignment.topCenter, child: FlutterLogo( size: 60.0, ), ), ), ] ),), ); } }
This creates an app which looks like the following.
Conclusion
Align class is very simple in terms of how it can be used across the Flutter App without too much work. It also pivots the Flutter App in changing the alignment of the child! Make sure to use the code example to best use.
“Learn and be Curious”