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.