CrossAxisAlignment

Learn to align on the cross axis with CrossAxisAlignment.

CrossAxisAlignment

CrossAxisAlignment determines how children are aligned along the cross axis in Column and Row. In Column the cross axis is horizontal, in Row vertical. Common values: center, start, end, stretch (make children full width/height on the cross axis).

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Text('Tam genişlik'),
    Text('Aynı genişlik'),
  ],
)

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Orta'),
    Text('Hizalı'),
  ],
)

stretch vs center

stretch expands children as much as possible on the cross axis; in Column it makes each child full width, in Row full height. center centers children on the cross axis. stretch is especially useful with widgets that can take width such as Container and Button.

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(color: Colors.red, height: 40),
    Container(color: Colors.blue, height: 40),
  ],
)

Exercise Print CrossAxisAlignment info

In main, print two lines with print: crossAxis capraz and stretch yay.

Show example solution

void main() {
  print('crossAxis capraz');
  print('stretch yay');
}

Test yourself

What does CrossAxisAlignment.stretch do?
- Centers children
- Hides children
- Arranges children randomly
- Makes children full width/height on the cross axis
Show answer

Makes children full width/height on the cross axis — stretch expands children as much as possible on the cross axis.

Stretch the children

crossAxisAlignment: CrossAxisAlignment.____,
  children: [Text('A'), Text('B')],

Show answer

crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [Text('A'), Text('B')],

CrossAxisAlignment concepts

CrossAxisAlignment

Cross axis alignment
stretch

Expand children on cross axis
CrossAxisAlignment.start

Align to cross axis start
CrossAxisAlignment.end

Align to cross axis end

Next lesson: Summary - Column and Row

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies