Summary - Column and Row

Combine Column, Row and alignments to make a profile row.

Column and Row summary

Column and Row are two fundamental layouts that arrange multiple widgets vertically and horizontally respectively. mainAxisAlignment sets distribution on the main axis, crossAxisAlignment sets alignment on the cross axis. By nesting Column inside Row or Row inside Column you can build two-dimensional layouts. Here you can build a profile row.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Ada Yılmaz', style: TextStyle(fontWeight: FontWeight.bold)),
        Text('Flutter geliştirici'),
      ],
    ),
    Icon(Icons.person),
  ],
)

Exercise Build a profile row and run

First print print('profil hazir'), then call runApp(MaterialApp(home: Row(...))). The Row should have mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center and children: [Text('Ada'), Icon(Icons.person)].

Show example solution

import 'package:flutter/material.dart';

void main() {
  print('profil hazir');
  runApp(MaterialApp(home: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [Text('Ada'), Icon(Icons.person)],
  )));
}

Test yourself

Which widget is used for a profile row (avatar left, name right)?
- Column
- Row
- Stack
- Container
Show answer

Row — A profile row places avatar and name side by side, so Row is used.

Set horizontal distribution

Row(
  ____: MainAxisAlignment.spaceBetween,
  children: [Text('A'), Text('B')],
)

Show answer

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [Text('A'), Text('B')],
)

Column and Row combined

Dikey düzen

With Column
Yatay düzen

With Row
Ana eksen dağılımı

With mainAxisAlignment
Çapraz eksen hizalaması

With crossAxisAlignment

Next lesson: The Padding widget

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies