Align Widget in Flutter

Contents

1 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”

0 Shares