Control flow (if, for, while, switch) in Flutter - Mini App: Build & Ship

Build: Control Flow Demo

This screen demonstrates basic control flow statements in Flutter: if, for, while, and switch. It shows a list of numbers and their classification using these statements.

Target UI

-------------------------
| Control Flow Demo     |
|-----------------------|
| Numbers:              |
| 1 2 3 4 5             |
|                       |
| Even or Odd:          |
| 1: Odd                |
| 2: Even               |
| 3: Odd                |
| 4: Even               |
| 5: Odd                |
|                       |
| Count Down:           |
| 5 4 3 2 1             |
|                       |
| Switch Example:       |
| Number 3 is Three     |
-------------------------

Display a list of numbers from 1 to 5 using a for loop.

For each number, show if it is Even or Odd using an if statement.

Show a countdown from 5 to 1 using a while loop.

Use a switch statement to display a message for number 3.

Starter Code

Flutter

import 'package:flutter/material.dart';

class ControlFlowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Control Flow Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Numbers:'),
            // TODO: Add code to display numbers 1 to 5 using for loop
            const SizedBox(height: 16),
            const Text('Even or Odd:'),
            // TODO: Add code to display if each number is even or odd using if
            const SizedBox(height: 16),
            const Text('Count Down:'),
            // TODO: Add code to display countdown from 5 to 1 using while loop
            const SizedBox(height: 16),
            const Text('Switch Example:'),
            // TODO: Add code to display message for number 3 using switch
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class ControlFlowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<int> numbers = [];
    for (int i = 1; i <= 5; i++) {
      numbers.add(i);
    }

    List<String> evenOdd = [];
    for (var number in numbers) {
      if (number % 2 == 0) {
        evenOdd.add('$number: Even');
      } else {
        evenOdd.add('$number: Odd');
      }
    }

    List<int> countdown = [];
    int count = 5;
    while (count > 0) {
      countdown.add(count);
      count--;
    }

    String switchMessage;
    switch (3) {
      case 1:
        switchMessage = 'Number 3 is One';
        break;
      case 2:
        switchMessage = 'Number 3 is Two';
        break;
      case 3:
        switchMessage = 'Number 3 is Three';
        break;
      default:
        switchMessage = 'Number 3 is Unknown';
    }

    return Scaffold(
      appBar: AppBar(title: const Text('Control Flow Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Numbers:'),
            Row(
              children: numbers
                  .map((n) => Padding(
                        padding: const EdgeInsets.only(right: 8.0),
                        child: Text('$n'),
                      ))
                  .toList(),
            ),
            const SizedBox(height: 16),
            const Text('Even or Odd:'),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: evenOdd
                  .map((text) => Text(text))
                  .toList(),
            ),
            const SizedBox(height: 16),
            const Text('Count Down:'),
            Row(
              children: countdown
                  .map((n) => Padding(
                        padding: const EdgeInsets.only(right: 8.0),
                        child: Text('$n'),
                      ))
                  .toList(),
            ),
            const SizedBox(height: 16),
            const Text('Switch Example:'),
            Text(switchMessage),
          ],
        ),
      ),
    );
  }
}

This Flutter widget shows how to use basic control flow statements.

• For loop: We create a list of numbers from 1 to 5 and display them in a row.
• If statement: We check each number to see if it is even or odd and display the result.
• While loop: We count down from 5 to 1 and show the numbers in a row.
• Switch statement: We check the number 3 and display a message accordingly.

This example helps beginners see how these control flows work in a simple Flutter UI.

Final Result

Completed Screen

-------------------------
| Control Flow Demo     |
|-----------------------|
| Numbers:              |
| 1 2 3 4 5             |
|                       |
| Even or Odd:          |
| 1: Odd                |
| 2: Even               |
| 3: Odd                |
| 4: Even               |
| 5: Odd                |
|                       |
| Count Down:           |
| 5 4 3 2 1             |
|                       |
| Switch Example:       |
| Number 3 is Three     |
-------------------------

The screen is static and shows the lists and messages.

No buttons or gestures are needed for this demo.

Stretch Goal

Add a button that when pressed, changes the number in the switch statement and updates the message accordingly.

💡 Hint

Use a StatefulWidget and setState to update the number and switch message.