StatefulWidget in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Flutter StatefulWidget code?

Consider this Flutter app code. What text will be shown on the screen after tapping the button twice?

Flutter

import 'package:flutter/material.dart';

class CounterApp extends StatefulWidget {
  @override
  State<CounterApp> createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int count = 0;

  void increment() {
    setState(() {
      count += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Count: $count'),
              ElevatedButton(
                onPressed: increment,
                child: Text('Add'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

A Count: 3

B Count: 1

C Count: 0

D Count: 2

💡 Hint

Each tap increases count by 1 and updates the UI.

The button calls increment(), which adds 1 to count and calls setState to update the UI. After two taps, count is 2, so the text shows 'Count: 2'.

❓ lifecycle

intermediate

Which lifecycle method is called only once when a StatefulWidget is inserted into the widget tree?

In Flutter StatefulWidget lifecycle, which method runs exactly once when the widget is first created?

A initState()

B build()

C dispose()

D didUpdateWidget()

💡 Hint

This method is used to initialize data before the widget appears.

initState() is called once when the widget is inserted. build() can be called many times. dispose() is called when the widget is removed. didUpdateWidget() runs when the widget configuration changes.

📝 Syntax

advanced

What error does this Flutter StatefulWidget code produce?

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

Flutter

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() {
    return _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Text('Hello');
  }

  void setState(VoidCallback fn) {
    // empty override
  }
}

A Error: setState() method override with wrong signature

B No error, runs fine

C Error: Missing build method

D Error: createState() must be static

💡 Hint

setState() has a specific signature and purpose in State class.

Overriding setState() without matching the required signature causes a compile-time error because setState() expects a void Function() parameter.

❓ navigation

advanced

What happens to StatefulWidget state when navigating back to it using Navigator.pop()?

If you navigate from Screen A (StatefulWidget) to Screen B, then return to Screen A using Navigator.pop(), what happens to Screen A's state?

A State is lost and causes an error

B State is preserved as Screen A was not destroyed

C State is saved to disk and restored automatically

D State is reset because Screen A is rebuilt from scratch

💡 Hint

Navigator.pop() removes the top screen and reveals the previous one.

When you pop Screen B, Screen A is still in memory with its state preserved. It is not rebuilt unless explicitly removed.

🔧 Debug

expert

Why does this StatefulWidget not update UI after setState call?

This code calls setState but the UI text does not change. Why? class MyWidget extends StatefulWidget { @override State createState() => _MyWidgetState(); } class _MyWidgetState extends State { String text = 'Hello'; void changeText() { setState(() { text = 'Hello'; }); } @override Widget build(BuildContext context) { return Text(text); } }

A Text widget does not rebuild on setState

B setState must be called outside the State class

C setState called but state value did not change, so UI not updated

D Missing call to super.setState() inside setState

💡 Hint

UI updates only if state variables change inside setState.

Calling setState with no actual change to state variables does not trigger UI update because Flutter optimizes rebuilds.

Practice

1. What is the main purpose of a StatefulWidget in Flutter?

easy

A. To create a widget that can change its appearance or data during runtime

B. To create a widget that never changes once built

C. To define the app's navigation routes

D. To style the app's text and colors

Solution

1. Step 1: Understand StatefulWidget role

   A StatefulWidget allows the UI to update when its data changes during app use.

2. Step 2: Compare options

   Only To create a widget that can change its appearance or data during runtime describes this dynamic behavior; others describe static or unrelated features.

3. Final Answer:

   To create a widget that can change its appearance or data during runtime -> Option A

4. Quick Check:

   StatefulWidget = dynamic UI [OK]

Hint: StatefulWidget = widget that remembers and updates data [OK]

Common Mistakes:

• Confusing StatefulWidget with StatelessWidget
• Thinking StatefulWidget is for styling only
• Believing StatefulWidget controls navigation

2. Which of the following is the correct way to define a StatefulWidget class in Flutter?

easy

A. class MyWidget extends StatefulWidget {}

B. class MyWidget extends Widget {}

C. class MyWidget extends StatelessWidget {}

D. class MyWidget extends BuildContext {}

Solution

1. Step 1: Identify correct base class

   A StatefulWidget must extend the StatefulWidget class to have mutable state.

2. Step 2: Check options

   Only class MyWidget extends StatefulWidget {} extends StatefulWidget; others extend unrelated or incorrect classes.

3. Final Answer:

   class MyWidget extends StatefulWidget {} -> Option A

4. Quick Check:

   StatefulWidget class extends StatefulWidget [OK]

Hint: StatefulWidget class must extend StatefulWidget [OK]

Common Mistakes:

• Using StatelessWidget instead of StatefulWidget
• Extending Widget directly (not allowed)
• Confusing BuildContext with widget class

3. What will be the output when the following Flutter code runs and the button is pressed once?

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

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

  void increment() {
    setState(() {
      count += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(onPressed: increment, child: Text('Add'))
      ],
    );
  }
}

medium

A. The button does nothing because increment is not called

B. The text shows 'Count: 0' and does not change when button is pressed

C. The app crashes due to missing setState call

D. The text updates to 'Count: 1' after pressing the button once

Solution

1. Step 1: Understand setState usage

   The increment method calls setState to update count and rebuild UI.

2. Step 2: Predict UI update

   After pressing the button once, count increases from 0 to 1, so text shows 'Count: 1'.

3. Final Answer:

   The text updates to 'Count: 1' after pressing the button once -> Option D

4. Quick Check:

   setState updates UI count = 1 [OK]

Hint: setState triggers UI update with new data [OK]

Common Mistakes:

• Forgetting to call setState inside increment
• Assuming UI updates without setState
• Thinking button press does nothing

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

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() {
    return _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  int counter = 0;

  void increment() {
    counter += 1;
  }

  @override
  Widget build(BuildContext context) {
    return Text('Counter: $counter');
  }
}

medium

A. Missing override annotation on createState method

B. increment method does not call setState, so UI won't update

C. State class should not be private (underscore prefix)

D. Text widget cannot display integers directly

Solution

1. Step 1: Check state update method

   The increment method changes counter but does not call setState, so UI won't rebuild.

2. Step 2: Verify other options

   Override annotation is optional but recommended; private state class is normal; Text can display strings with variables.

3. Final Answer:

   increment method does not call setState, so UI won't update -> Option B

4. Quick Check:

   setState missing = no UI update [OK]

Hint: Always call setState to update UI in StatefulWidget [OK]

Common Mistakes:

• Forgetting setState in state-changing methods
• Thinking private state class is an error
• Confusing override annotation necessity

5. You want to create a counter app using StatefulWidget that increments the count only if the current count is even. Which modification to the increment method below achieves this?

void increment() {
  setState(() {
    count += 1;
  });
}

hard

A. Call setState only when count is odd: if (count % 2 != 0) setState(() { count += 1; });

B. Move setState call outside the if: if (count % 2 == 0) { count += 1; } setState(() {});

C. Add an if check inside setState: if (count % 2 == 0) count += 1;

D. Remove setState and just increment count directly

Solution

1. Step 1: Understand setState usage

   setState must wrap the code that changes the state to update UI correctly.

2. Step 2: Apply condition inside setState

   Add an if check inside setState: if (count % 2 == 0) count += 1; correctly checks if count is even inside setState before incrementing.

3. Step 3: Analyze other options

   Move setState call outside the if: if (count % 2 == 0) { count += 1; } setState(() {}); calls setState after increment, which may update UI unnecessarily; Call setState only when count is odd: if (count % 2 != 0) setState(() { count += 1; }); increments only if odd, wrong logic; Remove setState and just increment count directly removes setState, so UI won't update.

4. Final Answer:

   Add an if check inside setState: if (count % 2 == 0) count += 1; -> Option C

5. Quick Check:

   Condition inside setState updates UI correctly [OK]

Hint: Put condition inside setState to update UI only when needed [OK]

Common Mistakes:

• Calling setState without changing state inside
• Changing state outside setState
• Wrong condition logic for even check