Align Widget in Flutter

In Flutter, the "Align" widget is used to position a child widget within the bounds of its parent. The Align widget takes two main properties: alignment and child.

 

  • The "alignment" property is a AlignmentDirectional value, which specifies the position of the child widget within the parent. Some common values include:
    • Alignment.topLeft: positions the child in the top-left corner of the parent
    • Alignment.center: positions the child in the center of the parent
    • Alignment.bottomRight: positions the child in the bottom-right corner of the parent
  • The "child" property is the widget that you want to position within the parent.

 

Here is an example of how to use the Align widget to position a child button in the center of its parent:


Align(

    alignment: Alignment.center,

    child: FlatButton(

        onPressed: () {},

        child: Text('Click Me'),

    ),

)

 

You can also use the Align widget to position a child based on a fractional offset from the top left corner of the parent. You can use Alignment(x,y) where x and y are the fraction of the parent size.


Align(

    alignment: Alignment(0.7, 0.9),

    child: FlatButton(

        onPressed: () {},

        child: Text('Click Me'),

    ),

)

 

It's worth noting that you can use Align widget in conjunction with other widgets like Container, Padding, etc to achieve your desired layout.


Video Link:

Video Link:
 
Post a Comment (0)
Previous Post Next Post