o7planning

Flutter Align Tutorial

View more Tutorials:

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.
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
  • TODO Link?

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 heightFactor is not null, the height of Align will be equal to that of the child multiplied by this factor.
If heightFactor is not specified, the height of the Align will be as large as possible.
double heightFactor
For example:
heightFactor (ex1)
Align (
    alignment: Alignment.bottomRight,
    heightFactor: 3.0,
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: () {}
    )
)

View more Tutorials:

Maybe you are interested

These are online courses outside the o7planning website that we introduced, which may include free or discounted courses.