Control flow (if, for, while, switch) in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this Flutter widget display?

Consider this Flutter code snippet. What text will appear on the screen?

Flutter

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  final int count = 3;

  @override
  Widget build(BuildContext context) {
    String message = '';
    for (int i = 0; i < count; i++) {
      if (i == 2) {
        message += 'End';
      } else {
        message += 'Step ' + i.toString() + ', ';
      }
    }
    return Text(message);
  }
}

A Step 0, Step 1, Step 2, End

B Step 0, Step 1, End

C Step 0, Step 1,

D End

💡 Hint

Look at the loop and what happens when i equals 2.

The loop runs from 0 to 2 (3 times). For i=0 and i=1, it adds 'Step 0, ' and 'Step 1, '. For i=2, it adds 'End'. So the final string is 'Step 0, Step 1, End'.

❓ lifecycle

intermediate

What happens when this Flutter StatefulWidget runs?

Given this Flutter StatefulWidget code, what will be the value of counter after pressing the button twice?

Flutter

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int counter = 0;

  void increment() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: increment,
      child: Text('Count: $counter'),
    );
  }
}

A Count: 0

B Count: 1

C Count: 2

D Count: null

💡 Hint

Each button press calls increment which increases counter by 1.

The counter starts at 0. Each button press calls increment which increases counter by 1 and calls setState to update UI. After two presses, counter is 2.

📝 Syntax

advanced

What error does this Flutter code produce?

Look at this Flutter code snippet. What error will it cause when compiled?

Flutter

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int x = 5;
    if (x > 3) {
      return Text('Greater');
    } else {
      return Text('Smaller');
    }
  }
}

A SyntaxError: Missing parentheses in if statement

B RuntimeError: Variable x not defined

C No error, outputs 'Greater'

D TypeError: Cannot compare int with int

💡 Hint

Check the syntax of the if statement in Dart.

In Dart, the condition in an if statement must be inside parentheses. The code 'if x > 3 {' is missing parentheses, causing a syntax error.

❓ navigation

advanced

What screen will show after this navigation code runs?

In this Flutter code, what screen will appear after pressing the button?

Flutter

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => SecondScreen()),
        );
      },
      child: Text('Go to Second'),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Second Screen');
  }
}

A Second Screen appears and FirstScreen is removed from stack

B Second Screen appears but FirstScreen remains in stack

C FirstScreen remains visible, no navigation happens

D App crashes due to navigation error

💡 Hint

pushReplacement replaces the current screen with the new one.

Navigator.pushReplacement removes the current screen (FirstScreen) and shows the new screen (SecondScreen). So only SecondScreen is visible.

🧠 Conceptual

expert

What is the output of this Flutter switch statement?

Given this Dart switch statement inside a Flutter widget, what text will be displayed if value is 2?

Flutter

import 'package:flutter/material.dart';

class SwitchWidget extends StatelessWidget {
  final int value = 2;

  @override
  Widget build(BuildContext context) {
    String result;
    switch (value) {
      case 1:
        result = 'One';
        break;
      case 2:
      case 3:
        result = 'Two or Three';
        break;
      default:
        result = 'Other';
    }
    return Text(result);
  }
}

A One

B Other

C Error: Missing break statement

D Two or Three

💡 Hint

Cases 2 and 3 share the same output.

The value 2 matches case 2, which falls through to the same code as case 3, setting result to 'Two or Three'.

Practice

1. Which control flow statement in Flutter is used to make decisions based on conditions?

easy

A. if

B. for

C. while

D. switch

Solution

1. Step 1: Understand the purpose of control flow statements

   if statements let the app choose between actions based on conditions.

2. Step 2: Identify the decision-making statement

   Among the options, only if directly tests a condition to decide what code runs.

3. Final Answer:

   if -> Option A

4. Quick Check:

   Decision making = if [OK]

Hint: Use if to check conditions and decide [OK]

Common Mistakes:

• Confusing for loops with decision making
• Thinking while is for choices instead of repetition
• Assuming switch is the only decision tool

2. Which of the following is the correct syntax for a for loop in Flutter to print numbers 0 to 4?

easy

A. for (int i = 1; i < 5; i++) { print(i); }

B. for i in 0 to 4 { print(i); }

C. for (int i = 0; i < 5; i++) { print(i); }

D. for (i = 0; i <= 5; i++) print(i);

Solution

1. Step 1: Check the loop initialization and condition

   for (int i = 0; i < 5; i++) { print(i); } initializes i at 0 and loops while i < 5, which prints 0 to 4.

2. Step 2: Verify syntax correctness

   for (int i = 0; i < 5; i++) { print(i); } uses correct Dart syntax with types and braces.

3. Final Answer:

   for (int i = 0; i < 5; i++) { print(i); } -> Option C

4. Quick Check:

   Correct Dart for loop syntax = for (int i = 0; i < 5; i++) { print(i); } [OK]

Hint: Remember Dart for loops use semicolons and braces [OK]

Common Mistakes:

• Using Python-style loops like 'for i in 0 to 4'
• Off-by-one errors in loop conditions
• Missing type declaration for loop variable

3. What will be the output of this Flutter Dart code?

int count = 0;
while (count < 3) {
  print(count);
  count++;
}

medium

A. 1 2 3

B. No output

C. 0 1 2 3

D. 0 1 2

Solution

1. Step 1: Analyze the while loop condition and increments

   The loop starts with count = 0 and runs while count < 3, printing count each time.

2. Step 2: Trace the printed values

   It prints 0, then increments to 1, prints 1, increments to 2, prints 2, increments to 3, then stops.

3. Final Answer:

   0 1 2 -> Option D

4. Quick Check:

   Loop prints values less than 3 = 0 1 2 [OK]

Hint: Count starts at 0 and stops before 3, so prints 0,1,2 [OK]

Common Mistakes:

• Including 3 in output mistakenly
• Confusing post-increment behavior
• Thinking loop runs zero times

4. Identify the error in this Flutter Dart code snippet:

int i = 0;
while (i < 5) {
  print(i);
}

medium

A. Missing increment of i inside the loop

B. Incorrect while loop syntax

C. Variable i should be declared inside the loop

D. print() cannot be used inside loops

Solution

1. Step 1: Check loop control variables

   The variable i is initialized but never changed inside the loop.

2. Step 2: Understand loop behavior

   Without incrementing i, the condition i < 5 is always true, causing an infinite loop.

3. Final Answer:

   Missing increment of i inside the loop -> Option A

4. Quick Check:

   Loops need changing variables to stop [OK]

Hint: Always update loop variables to avoid infinite loops [OK]

Common Mistakes:

• Forgetting to increment loop counters
• Assuming loop ends automatically
• Misunderstanding while loop syntax

5. You want to display a message in Flutter based on a user's score:

int score = 75;
switch (score ~/ 10) {
  case 10:
  case 9:
    print('Excellent');
    break;
  case 8:
    print('Very Good');
    break;
  case 7:
    print('Good');
    break;
  default:
    print('Keep Trying');
}

What message will be printed?

hard

A. Excellent

B. Good

C. Very Good

D. Keep Trying

Solution

1. Step 1: Calculate the switch expression value

   score is 75, so score ~/ 10 is integer division 75/10 = 7.

2. Step 2: Match the case for value 7

   Case 7 matches and prints 'Good'.

3. Final Answer:

   Good -> Option B

4. Quick Check:

   Integer division selects case 7 = 'Good' [OK]

Hint: Use integer division to group scores in switch cases [OK]

Common Mistakes:

• Forgetting integer division operator ~/
• Assuming score matches case directly
• Missing break statements causing fall-through