What is Align in Flutter

Align is a widget that aligns its child within itself. Moreover, based on the child’s size, it optionally sizes itself.

For instance, let us think about a minimal Flutter app that aligns a Flutter logo at top right.

Center(
        child: Column(
          children: [
            Container(
              height: 120.0,
              width: 120.0,
              color: Colors.blue[50],
              child: const Align(
                alignment: Alignment.topRight,
                child: FlutterLogo(
                  size: 60,
                ),
              ),
            ),

If we run the app, it looks like the following screenshot.

The code is quite simple. It gives the Container a light blue color. Besides, it has definite width and height, which are tight constraints.

Now, as a child the Align widget places its child, a Flutter logo at the top right corner inside the Container.

However, we could have placed it with an alignment of Alignment.bottomRight.

To do that we should have given the Container a tight constraint, just like before, and that constraint should be bigger than the Flutter logo.

Next, we consider another piece of code that might place three Flutter logo at three different positions inside the same Container.

As we find in the above screenshot, three Flutter logos show up at three different positions.

Let’s see the full code snippet first. After that, we’ll discuss the code.

import 'package:flutter/material.dart';

class AlignSample extends StatelessWidget {
  const AlignSample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Align Sample',
      debugShowCheckedModeBanner: false,
      home: AlignSampleHomme(),
    );
  }
}

class AlignSampleHomme extends StatelessWidget {
  const AlignSampleHomme({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Align Sample'),
      ),
      body: Center(
        child: Column(
          children: [
            Container(
              height: 120.0,
              width: 120.0,
              color: Colors.blue[50],
              child: const Align(
                alignment: Alignment.topRight,
                child: FlutterLogo(
                  size: 60,
                ),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            Container(
              height: 120.0,
              width: 120.0,
              color: Colors.yellow[50],
              child: const Align(
                alignment: Alignment(0.2, 0.6),
                child: FlutterLogo(
                  size: 60,
                ),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            Container(
              height: 120.0,
              width: 120.0,
              color: Colors.red[50],
              child: const Align(
                alignment: FractionalOffset(0.2, 0.6),
                child: FlutterLogo(
                  size: 60,
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add_a_photo),
      ),
    );
  }
}

The alignment property describes a point in the child’s coordinate system and a different point in the coordinate system of this widget.

After that, the Align widget positions the child, here a Flutter logo, in a way so that both points are lined up on top of each other.

In the first case, the Align widget uses one of the defined constants from Alignment, which is Alignment.topRight.

Container(
              height: 120.0,
              width: 120.0,
              color: Colors.blue[50],
              child: const Align(
                alignment: Alignment.topRight,
                child: FlutterLogo(
                  size: 60,
                ),
              ),
            ),

As a result, this constant value places the FlutterLogo at the top right corner of the parent blue Container.

However, the second case is different, where the Alignment defines a single point.

Container(
              height: 120.0,
              width: 120.0,
              color: Colors.yellow[50],
              child: const Align(
                alignment: Alignment(0.2, 0.6),
                child: FlutterLogo(
                  size: 60,
                ),
              ),
            ),

It calculates the position of the Flutter logo in a different way.

The formula is, the result of (0.2 * width of FlutterLogo/2 + width of FlutterLogo/2) comes to a whole number, that is 36.0.

And this is a point in the coordinate system of Flutter logo.

The next point is defined by this formula – (0.6 * height of FlutterLogo/2 + height of FlutterLogo/2), which is equal to 48.0. Moreover, it’s point in the coordinate system of the Align widget.

As a result Align will place the FlutterLogo at (36.0, 48.0) according to this coordinate system.

Although in the third example, the calculation goes in the same direction; yet the result differs with the previous one.

alignment: FractionalOffset(0.2, 0.6)

Consequently, the position of Flutter logo changes.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter