Column and Row in Flutter - Mini App: Build & Ship

Build: Column and Row Demo

This screen shows how to arrange text widgets vertically using Column and horizontally using Row.

Target UI

-------------------------
| Column and Row Demo   |
|-----------------------|
| Column:               |
| Hello                 |
| Flutter               |
| World                 |
|                       |
| Row:                  |
| [Hello] [Flutter] [World] |
-------------------------

Use a Column widget to display three Text widgets stacked vertically: 'Hello', 'Flutter', 'World'.

Below the Column, use a Row widget to display the same three Text widgets horizontally.

Center the Column and Row horizontally on the screen.

Add some spacing between the Text widgets in both Column and Row.

Starter Code

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Column and Row Demo')),
        body: Center(
          child: Column(
            // TODO: Add vertical Text widgets here
          ),
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Column and Row Demo')),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // Column with vertical Text widgets
              const Text('Hello'),
              const SizedBox(height: 8),
              const Text('Flutter'),
              const SizedBox(height: 8),
              const Text('World'),
              const SizedBox(height: 24),
              // Row with horizontal Text widgets
              Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text('Hello'),
                  SizedBox(width: 16),
                  Text('Flutter'),
                  SizedBox(width: 16),
                  Text('World'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

We use a Column widget to stack the three Text widgets vertically. We add SizedBox widgets with fixed height to create space between them.

Below the Column, we add a Row widget with the same three Text widgets arranged horizontally. We add SizedBox widgets with fixed width to space them apart.

Both Column and Row are centered horizontally using crossAxisAlignment and mainAxisAlignment properties, and the whole layout is centered on screen with a Center widget.

Final Result

Completed Screen

-------------------------
| Column and Row Demo   |
|-----------------------|
| Column:               |
| Hello                 |
|                       |
| Flutter               |
|                       |
| World                 |
|                       |
| Row:                  |
| Hello  Flutter  World  |
-------------------------

The screen shows the three words stacked vertically with space between them.

Below that, the same three words appear in a row with space between them.

No buttons or gestures are active on this screen.

Stretch Goal

Add a button that toggles the text color between black and blue for all Text widgets.

💡 Hint

Use a StatefulWidget and a boolean state variable to switch colors on button press.