Flutter Align Tutorial with Examples

Flutter Align
child
alignment
widthFactor
heightFactor

1. Flutter Align

In Flutter, Align is a widget used to contain another one and provides alignment parameters to align the position of the child widget.

Center and Align are quite similar. They have only one child widget, but Center always places its child widget in the center.

Flutter Center

Align Constructor

const Align(
    {Key key,
    AlignmentGeometry alignment: Alignment.center,
    double widthFactor,
    double heightFactor,
    Widget child}
)

If the widthFactor parameter is not specified then the width of the Align will be as large as possible. Otherwise, the width of the Align will be equal to the width of the child multiplied by the widthFactor. Similarly, the heightFactor parameter has the same behavior for the height of the Align. Therefore, the size of the Align will be as large as possible by default.

(ex1)

Align (
    alignment: Alignment.bottomRight,
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: () {}
    )
)

2. child

Widget child

3. alignment

alignment property is used to define how to align the child. The default value of alignment is Alignment.center.

AlignmentGeometry alignment: Alignment.center

Flutter AlignmentGeometry
Flutter Alignment

4. widthFactor

widthFactor is a factor used to calculate the width of the Align based on the width of the child. If the widthFactor is not null, the width of Align will be equal to that of the child multiplied by this factor.

If widthFactor is not specified, the width of the Align will be as large as possible.

double widthFactor

For example:

widthFactor (ex1)

Align (
    alignment: Alignment.bottomRight,
    widthFactor: 2.0,
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: () {}
    )
)

5. heightFactor

heightFactor is a factor used to calculate the height of the Align based on the width of the child. If the heightFactoris not null, the height of Align will be equal to that of the child multiplied by this factor.

If heightFactoris not specified, the height of the Align will be as large as possible.

double heightFactor