Flutter Align widget Implementation With Examples

Flutter Align allows you to position its child widget at the desired location you want. It accepts the alignment properties for alignment. In this entire tutorial, you will know how to implement the Flutter Align widget.

How to create Flutter Align Widget

To create align widget you have to just wrap the child widget with the Align() class. For example, I want a TextButton to align to the center then I will wrap the button widget with the Align().

Container(
          margin: EdgeInsets.all(20),
          color: Colors.teal,
          width: 500,
          height: 500,
          child: Align(
            alignment: Alignment.center,
            child: ElevatedButton(
              child: Icon(
                Icons.people_alt_rounded,
                size: 40,
              ),
              onPressed: () {},
            ),
          ),
        ),

Output

How to use Flutter Align Widget

The above code was aligning the flutter align widget to the center. Let’s align the Elevated button to a different position. The Button is placed inside the container widget.

1. Placing the button to the center-left

To do so you will use Alignment.centerLeft

Container(
          margin: EdgeInsets.all(20),
          color: Colors.teal,
          width: 200,
          height: 200,
          child: Align(
            alignment: Alignment.centerLeft,
            child: ElevatedButton(
              child: Icon(
                Icons.people_alt_rounded,
                size: 40,
              ),
              onPressed: () {},
            ),
          ),
        ),

Output

2 Aligning the button to the center-right

alignment: Alignment.centerRight

Output

3. Placing the button to the top center

alignment: Alignment.topCenter

Output

4. Placing the button to the bottom center

alignment: Alignment.bottomCenter

Output

5. Aligning the button to the bottom left

alignment: Alignment.bottomLeft

Output

7. Aligning the button to the bottom right

alignment: Alignment.bottomRight

Output

8. Placing the button to the top left

alignment: Alignment.topRight

Output

9. Aligning the button to the top right

alignment: Alignment.topRight

Output

These are the ways you can manipular or place the children at various positions using the Align() Widget. You have to just wrap a widget using Align() widget and position the widget anywhere you want. I hope this tutorial on Align() has cleared your queries. If you have any doubts then you can contact us for more help.