The Align widget is another single-child layout widget that is a more flexible alternative to Center. It allows a widget to be aligned in a variety of ways using an alignment
property.
The Align widget uses the following syntax:
Align( alignment: Alignment.type, child: Widget, )
The alignment
parameter enables us to specify how we want the child widget aligned. Flutter provides us with the following constants including:
Alignment.topLeft
Alignment.centerRight
Alignment.bottomCenter
Alignment.bottomRight
- And more!
The child
parameter enables us to specify the child
widget that requires alignment. For example:
Align( alignment: Alignment.topRight, child: Text("In the top right") )
Let’s edit our code and replace the Center widget with an Align widget.
Instructions
Replace the Center widget with an Alignment of any type. Try changing to a variety of types! Check out the Align widget documentation for all of the options.
Press the blue Run button to see the result.
Hint
Change the word Center
to Align
and give the widget an alignment
property with a type from the Alignment
class.
Solution
The inside of main
should look something like:
runApp( const MaterialApp( home: Scaffold( body: Align( alignment: Alignment.bottomCenter, child: Icon( Icons.center_focus_strong, color: Colors.red, size: 100.0, ) ) ) ) );