Flutter - Using Align Widget Examples

This tutorial shows you how to set the alignment of a widget using Align widget in Flutter.

It's quite common to align a widget within its parent. You may already be familiar with Center widget, which is used to place a widget right on the center of its parent. If you need to use different alignments, you can use Align widget. Basically what you need to do is wrapping the widget to be aligned as the child of Align widget. Below are the examples.

Using Align Widget

Here is the constructor of the Align widget.

  const Align({
    Key key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child,
  })

There is no required parameter. However, usually you need to pass a Widget to be aligned as the child argument.

For thist tutorial, we are going to have a Text widget inside a Container. To demonstrate the usages of Align widget, the Text is wrapped inside an Align widget despite the Container itself has alignment property.

  Container(
    width: 300,
    height: 300,
    color: Colors.lightBlueAccent,
    child: const Align(
      alignment: Alignment.bottomRight,
      child: const Text(
        'Woolha.com',
        style: TextStyle(fontSize: 30, color: Colors.teal, fontWeight: FontWeight.bold),
      ),
    ),
  )

Output:

Setting Alignment

As you can see on the above output, if you don't pass the alignment argument, by default the child will be aligned to the center. To change the alignment of the child, you need to pass the alignment argument.

  Container(
    width: 300,
    height: 300,
    color: Colors.lightBlueAccent,
    child: const Align(
      alignment: Alignment.topLeft,
      child: const Text(
        'Woolha.com',
        style: TextStyle(fontSize: 30, color: Colors.teal, fontWeight: FontWeight.bold),
      ),
    ),
  )

Output:

The above example aligns the child to the top left of its parent. Besides topLeft, there are some defined constants that allow you to easily align the child at certain positions.

Alignment.topLeft

Alignment.topCenter

Alignment.topRight

Alignment.centerLeft

Alignment.center

Alignment.centerRight

Alignment.bottomLeft

Alignment.bottomCenter

Alignment.bottomRight

If you need to use another alignment which is not defined as constant, you can create a custom Alignment instance. The constructor of Alignment has two required arguments: x and y which represents alignment in x-axis and y-axis respectively.

  const Alignment(this.x, this.y)

For both axises, the distance from -1.0 to +1.0 is the distance from one side to the other side. For x-axis, a value of -1.0 means the child is on the left edge, while a value of 1.0 means the child is on the right edge. For y-axis, a value of -1.0 means the widget is on the top edge, while a value of 1.0 means the widget is on the bottom edge. If the value is less than -1.0 or greater than 1.0, the child may be positioned outside its parent.

The below example sets the alignment of x-axis and y-axis to -0.5 and 0.5 respectively. That means the child is horizontally half way between the left edge and the center and vertically half way between the center and the bottom edge.

  Container(
    width: 300,
    height: 300,
    color: Colors.lightBlueAccent,
    child: const Align(
      alignment: const Alignment(-0.5, 0.5)
      child: const Text(
        'Woolha.com',
        style: TextStyle(fontSize: 30, color: Colors.teal, fontWeight: FontWeight.bold),
      ),
    ),
  )

Output:

Setting Width Factor and Height Factor

If a dimension (either width or height) is unconstrained, it's possible to control the size of this widget for that dimension. You can pass widthFactor argument which is used to set the width based on the child's width multiplied by the factor. Similarly, you can pass heightFactor to set the height. If passed, the values of widthFactor and heightFactor must be a positive number and can be greater than 1.0.

The below example doesn't have both width and height constraints. The values for widthFactor and heightFactor are set to 1.5 and 5.0 respectively.

  Container(
    color: Color.fromARGB(50, 0, 0, 255),
    child: const Align(
      widthFactor: 1.5,
      heightFactor: 5,
      child: const Text(
        'Woolha.com',
        style: TextStyle(fontSize: 30, color: Colors.teal, fontWeight: FontWeight.bold)
      ),
    ),
  )

Output:

However, it may not work if the dimension is constrained. For example, the below code has a size constraint for the width. The passed widthFactor doesn't affect the width of the widget.

  Container(
    width: 400,
    color: Color.fromARGB(50, 0, 0, 255),
    child: const Align(
      widthFactor: 1.5,
      heightFactor: 5,
      child: const Text(
        'Woolha.com',
        style: TextStyle(fontSize: 30, color: Colors.teal, fontWeight: FontWeight.bold)
      ),
    ),
  )

Output:

Align Parameters

• Key key: The widget's key.
• Alignment alignment: How to align the child. Defaults to Alignment.center.
• double widthFactor: If non-null, sets its width to the child's width multiplied by this factor.
• double heightFactor: If non-null, sets its height to the child's height multiplied by this factor.
• Widget child: The widget to be aligned.

Full Code

Below is the full code of this tutorial.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: _AlignExample(),
      );
    }
  }
  
  class _AlignExample extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Woolha.com Flutter Tutorial'),
        ),
        body: Container(
          width: 300,
          height: 300,
          color: Color.fromARGB(50, 0, 0, 255),
          child: const Align(
            alignment: Alignment.topLeft,
  //          alignment: const Alignment(-0.5, 2.5),
  //          widthFactor: 0.5,
  //          heightFactor: 5,
            child: const Text(
              'Woolha.com',
              style: TextStyle(fontSize: 30, color: Colors.teal, fontWeight: FontWeight.bold)
            ),
          ),
        ),
      );
    }
  }

Summary

To set the alignment of a widget in Flutter, you can wrap it as the child of an Align widget and pass the alignment argument to adjust the position. The widthFactor and heightFactor arguments can be passed as well to set the width and the height relative to the child's width and height respectively.

You can also read about:

• AnimatedAlign: a widget that animates its child when the aligment changes.