StatefulWidget in Flutter

Introduction

A StatefulWidget lets your app remember and change information while it runs. It helps your app update the screen when something changes.

When you want a button to change its label after being pressed.

When you need to keep track of a counter that increases when tapped.

When you want to show or hide parts of the screen based on user actions.

When you want to update the UI after fetching data from the internet.

When you want to animate something that changes over time.

Syntax

Flutter

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

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

The StatefulWidget class is immutable, but it creates a separate State object that holds mutable data.

The createState() method connects the widget to its state.

Examples

This example shows a simple counter that can change its number.

Flutter

class Counter extends StatefulWidget {
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

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

This example switches text between 'Hello' and 'Goodbye' based on a boolean.

Flutter

class ToggleText extends StatefulWidget {
  @override
  State<ToggleText> createState() => _ToggleTextState();
}

class _ToggleTextState extends State<ToggleText> {
  bool showHello = true;

  @override
  Widget build(BuildContext context) {
    return Text(showHello ? 'Hello' : 'Goodbye');
  }
}

Sample App

This app shows a button that counts how many times you press it. Each press updates the number on the button.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: CounterButton(),
        ),
      ),
    );
  }
}

class CounterButton extends StatefulWidget {
  const CounterButton({super.key});

  @override
  State<CounterButton> createState() => _CounterButtonState();
}

class _CounterButtonState extends State<CounterButton> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _increment,
      child: Text('Clicked $_count times'),
    );
  }
}

Important Notes

Always call setState() to tell Flutter to update the screen when your data changes.

Keep your state variables inside the State class, not the StatefulWidget class.

Use StatefulWidget only when you need to change the UI dynamically; otherwise, use StatelessWidget.

Summary

StatefulWidget helps your app remember and change data while running.

It has two parts: the widget itself and its state that holds changing data.

Use setState() inside the state to update the UI when data changes.

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