The Align widget

Learn to position a child at a specific point with Align.

The Align widget

Align is a widget that places its child at a specific position. Its alignment parameter takes an Alignment object. Values like Alignment.topLeft, Alignment.centerRight, Alignment.bottomCenter determine where the child goes. Center is a special case of Align with alignment: Alignment.center.

Align(
  alignment: Alignment.topLeft,
  child: Text('Sol üst'),
)

Align(
  alignment: Alignment.bottomRight,
  child: Text('Sağ alt'),
)

Alignment values

The Alignment class offers many ready positions: topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight. You can also define custom positions with decimal values like Alignment(0.5, -0.3); (0, 0) is dead center, (-1, -1) the top-left corner.

Align(
  alignment: Alignment(0, -1),  // top center
  child: Text('Üst orta'),
)

Align(
  alignment: Alignment(-1, 0),  // left center
  child: Text('Sol orta'),
)

Exercise Print Align info

In main, print two lines with print: align konum and alignment kose.

Show example solution

void main() {
  print('align konum');
  print('alignment kose');
}

Test yourself

What does the Align widget do?
- Positions the child randomly
- Sizes the child
- Places the child at a specific position
- Colors the child
Show answer

Places the child at a specific position — Align places the child at a specific position via Alignment values; such as topLeft, bottomRight.

Place at bottom-right

Align(
  alignment: Alignment.____,
  child: Text('Sağ alt'),
)

Show answer

Align(
  alignment: Alignment.bottomRight,
  child: Text('Sağ alt'),
)

Align concepts

Align

Positions the child
Alignment

Position object
Alignment.topLeft

Top-left corner
Alignment.bottomRight

Bottom-right corner

Next lesson: Summary - SizedBox and Center

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies