← All courses

Layouts: Row, Column and Container

🗓 May 31, 2026 ⏱ 1 min read

Row and Column

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Profile', style: TextStyle(fontSize: 20)),
    Row(children: const [
      Icon(Icons.star, color: Colors.amber),
      Text('4.8 rating'),
    ]),
  ],
)

Container — the all-rounder

Container(
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: const Color(0xFFF3EEFE),
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text('Card content'),
)
Tip: Wrap content in Expanded or Flexible inside a Row/Column to share remaining space.