Align Widget – Flutter Widget Guide By Flutter Agency

Align Widget is a  widget that aligns its child within itself and optionally sizes itself based on the child’s size.

What is Align Widget?

Align Widget in itself acts as a container and holds a widget. It contains different properties that help it to define how the child widget should be aligned over its parent

The constructor of an Align Widget looks like below :

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

There are three important attributes that the Align Widget uses. They are as listed below :

alignment 

The alignment attribute makes use of the Alignment Class and defines where the child widget should be placed at. This way, the logic behind the alignment is to create a simple coordinate system that can overlap the center of the Child widget of the Align with the position specified in the alignment.

The code snippet will look like below :

Align(
 alignment: Alignment.bottomRight
)

Example

Container(
     color: Colors.orangeAccent,
     height: 150.0,
     width: 150.0,
     child: Align(
     alignment: Alignment.bottomRight,
     child: FlutterLogo(
     size: 60.0,
     ),
    ),
  ),

we will get output like below :

Align bottomRight

bottomCenter

Container(
  color: Colors.orangeAccent,
  height: 150.0,
  width: 150.0,
  child: Align(
  alignment: Alignment.bottomCenter,
  child: FlutterLogo(
  size: 60.0,
   ),
 ),
 ),

Above code will give us output like below :

AlignbottomCenter

topCenter

Container(
           color: Colors.orange,
           height: 150.0,
           width: 150.0,
           child: Align(
             alignment: Alignment.topCenter,
             child: FlutterLogo(
               size: 60.0,
             ),
           ),
         ),

Above code will give us output like below :

AligntopCenter

child 

The Child Widget just as any other property can take in any Widget as its child. The Align Class by itself acts as a simple placeholder that adjusts its child based on the alignment position.

Align(
 alignment: Alignment.bottomRight,
 child:FlutterLogo
)

heightFactor 

As per the official document “If non-null, sets its height to the child’s height multiplied by this factor”. This way the alignment can be given a consistency across the height. It takes in a double value.

Code snippet will be like below :

Align(
     alignment: Alignment.bottomRight,
     child: FlutterLogo(
     size: 60.0,
     ),
     heightFactor: 0.5,
     ),

widthFactor 

Similar to heightFactor the widthFactor widget can also be manipulated.Code snippet will look like below :

Align(
       alignment: Alignment.topCenter,
       child: FlutterLogo(
       size: 60.0,
        ),
        widthFactor: 0.5,
      ),

Thank for Reading !!!
Keep Learning !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.