Flutter Align widget Implementation With Examples

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

Align the child widget to the center
Align the child widget to the center

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

Align the child widget to the center left
Align the child widget to the center-left

2 Aligning the button to the center-right

alignment: Alignment.centerRight

Output

Align the child widget to the center right
Align the child widget to the center right

3. Placing the button to the top center

alignment: Alignment.topCenter

Output

Align the child widget to the top center
Align the child widget to the top center

4. Placing the button to the bottom center

alignment: Alignment.bottomCenter

Output

Align the child widget to the bottom center
Align the child widget to the bottom center

5. Aligning the button to the bottom left

alignment: Alignment.bottomLeft

Output

Align the child widget to the bottom left
Align the child widget to the bottom left

7. Aligning the button to the bottom right

alignment: Alignment.bottomRight

Output

Align the child widget to the bottom right
Align the child widget to the bottom right

8. Placing the button to the top left

alignment: Alignment.topRight

Output

Align the child widget to the top left
Align the child widget to the top left

9. Aligning the button to the top right

alignment: Alignment.topRight

Output

Align the child widget to the top right
Align the child widget to the top right

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.

 

Code The Best
Hi, I am CodeTheBest. Here you will learn the best coding tutorials on the latest technologies like a flutter, react js, python, Julia, and many more in a single place.