Align widget aligns its child within itself and optionally sizes itself based on the child’s size.
Since Align wraps any widget based on the Alignment direction to its parent widget, we prefer using Stack as its parent when we need a layout that stretch the whole screen.
Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: Container(
width: 80,
height: 80,
color: Colors.blue,
child: Center(child: Text('topLeft')),
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
width: 80,
height: 80,
color: Colors.blue,
child: Center(child: Text('topCenter')),
),
),
Align(
alignment: Alignment.topRight,
child: Container(
width: 80,
height: 80,
color: Colors.blue,
child: Center(child: Text('topRight')),
),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
width: 80,
height: 80,
color: Colors.green,
child: Center(child: Text('centerLeft')),
),
),
Align(
alignment: Alignment.center,
child: Container(
width: 80,
height: 80,
color: Colors.green,
child: Center(child: Text('topLeft')),
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
width: 80,
height: 80,
color: Colors.green,
child: Center(child: Text('topLeft')),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Container(
width: 80,
height: 80,
color: Colors.redAccent,
child: Center(child: Text('bottomLeft')),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: 80,
height: 80,
color: Colors.redAccent,
child: Center(child: Text('bottomCenter')),
),
),
Align(
alignment: Alignment.bottomRight,
child: Container(
width: 80,
height: 80,
color: Colors.redAccent,
child: Center(child: Text('bottomRight')),
),
),
],
)
