Stateless Widgets vs Stateful Widgets

# CHAPTER 6

Stateless Widgets vs Stateful Widgets #

1. Introduction #

2. Learning Objectives #

• Define what "State" means in mobile development.

• Differentiate between StatelessWidget and StatefulWidget.

• Understand how to use the setState() method to trigger UI rebuilds.

• Convert a Stateless widget into a Stateful widget.

• Build a functional Counter App.

3. What is State? #

• The number of items in a shopping cart.

• Whether a checkbox is ticked (true or false).

• The current score in a game.

4. StatelessWidget #

• Use Cases: A static logo, a block of descriptive text, an icon, or a generic layout container.

• It only has one core function: the build() method.

class MyLogo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Icon(Icons.star, color: Colors.yellow);
  }
}

5. StatefulWidget #

• Use Cases: A checkbox, an animated loading bar, a form text input, or a counter button.

A StatefulWidget actually consists of TWO classes:

1. 1. The Widget class (which is immutable and can be thrown away).

1. 2. The State class (which holds the data and survives while the UI is redrawn).

6. Triggering a Rebuild with setState() #

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int count = 0; // This is our STATE data!

  void incrementCount() {
    // We MUST wrap the data change inside setState!
    // This tells Flutter: "The data changed, please redraw the screen!"
    setState(() {
      count++; 
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text("Count: $count")),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCount, // Call the function when clicked!
        child: Icon(Icons.add),
      ),
    );
  }
}

7. Widget Lifecycle Basics #

• initState(): Called exactly once when the widget is first inserted into the screen. Great for initializing variables or starting API calls.

• build(): Called every time setState is triggered.

• dispose(): Called exactly once when the widget is permanently removed from the screen. Great for stopping animations to save battery.

8. Visual Learning: The StatefulWidget Architecture #

[ StatefulWidget Class ]  (Immutable Configuration)
          |
    (createState)
          v
[ State Class ]          (Mutable Data)
  - int score = 0;       <-- Memory survives!
          |
       (build)
          v
[ The UI Tree ]          (Destroyed and recreated instantly!)
  - Text("Score: 0")

9. Common Mistakes #

• Forgetting setState: The #1 beginner mistake in Flutter. If you write count++; outside of a setState(() {}) block, the integer in the computer's RAM *will* increase, but the screen will *not* update! Flutter has no idea the data changed. You must tell it.

10. Best Practices #

• Use VS Code Snippets: Typing out the two classes required for a StatefulWidget is tedious. Simply type stful in VS Code and press Enter. The IDE will generate the entire boilerplate architecture for you!

11. Mini Project: The Counter App #

1. 1. Create a new Flutter project. Delete everything in main.dart.

1. 2. Write void main() { runApp(MaterialApp(home: CounterApp())); }.

1. 3. Type stful and create a StatefulWidget named CounterApp.

1. 4. Inside the _CounterAppState class, declare an integer: int points = 0;.

1. 5. Return a Scaffold. Give it an AppBar with the text "State Test".

1. 6. In the body, create a Center widget holding a Text widget: Text("Points: $points", style: TextStyle(fontSize: 40)).

1. 7. Add a floatingActionButton to the Scaffold.

1. 8. In the button's onPressed: property, write () { setState(() { points++; }); }.

1. 9. Press Play. Tap the button and watch the number update instantly!

12. Practice Exercises #

1. 1. If you are building an app screen that just displays a static "Terms of Service" text document, which type of widget should you use?

1. 2. If you are building a screen with a "Dark Mode" toggle switch, which type of widget must the switch be wrapped in?

13. MCQs with Answers #

14. Interview Questions #

• Q: Explain the fundamental difference between a StatelessWidget and a StatefulWidget. Give a real-world UI example for each.

• Q: Describe the Widget Lifecycle of a StatefulWidget. What is the specific purpose of the initState and dispose methods?

• Q: A junior developer writes count++; inside a button click event, but the Text widget displaying the count never updates on the screen. Identify the architectural mistake and explain how to fix it.

15. FAQs #

16. Summary #

17. Next Chapter Recommendation #