Control flow (if, for, while, switch) in Flutter - UI Render Trace

Component - Control flow (if, for, while, switch)

This Flutter component demonstrates how different control flow statements like if, for, while, and switch affect the UI rendering and behavior. It shows a simple counter with buttons to increase or reset the count, and displays messages based on the count value using these control flows.

Widget Tree

Scaffold
├─ AppBar
│  └─ Text
└─ Column
   ├─ Text (counter display)
   ├─ Text (message display)
   ├─ Row
   │  ├─ ElevatedButton (Increment)
   │  └─ ElevatedButton (Reset)
   └─ ListView
      └─ Text (list items from for loop)

The Scaffold provides the basic page structure with an AppBar showing the title. The body is a Column that vertically stacks the counter display, a message that changes based on the counter, a Row with two buttons side by side, and a scrollable list of items generated by a for loop.

Render Trace - 8 Steps

Step 1: Scaffold

Step 2: Column

Step 3: Text (counter display)

Step 4: Text (message display)

Step 5: Row

Step 6: ElevatedButton (Increment)

Step 7: ElevatedButton (Reset)

Step 8: ListView

State Change - Re-render

Trigger:User taps 'Increment' button

Before

count = 0, message = 'Count is low', list empty

→

After

count = 1, message = 'Count is low', list shows 'Item 0'

Re-renders:Entire Column subtree re-renders including counter Text, message Text, and ListView

UI Quiz - 3 Questions

What happens to the message text when the count reaches 5?

A It changes to 'Count is high'

B It changes to 'Count is medium'

C It stays 'Count is low'

D It disappears

Key Insight

Using control flow statements inside Flutter widgets lets you change what the user sees based on app state. For example, if statements can show different messages, for loops can create lists dynamically, and buttons can trigger state changes that rebuild parts of the UI. This makes apps interactive and responsive to user actions.

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