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'.