What is StatefulWidget in Flutter?

In Flutter, a StatefulWidget is a widget that can change its state during runtime. This means the UI can update dynamically when data changes. It is commonly used when the app needs to respond to user interactions such as button clicks, form inputs, animations, or API responses. Unlike StatelessWidget, which is static and immutable, StatefulWidget allows rebuilding the UI whenever the internal state changes.

Why Use StatefulWidget?

StatefulWidget is used when your UI depends on dynamic data. For example, counters, form validation, toggles, loading indicators, and real-time updates require state changes. It helps in creating interactive applications where the UI reacts to user input or backend data.

Basic Structure of StatefulWidget

DARTRead-only

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

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

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

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

A StatefulWidget consists of two classes: the widget class and the state class. The widget class is immutable, while the state class holds the mutable data and UI logic.

Example: Counter App using StatefulWidget

DARTRead-only

import 'package:flutter/material.dart';

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

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('StatefulWidget Example')),
      body: Center(
        child: Text(
          'Counter: $_counter',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('StatefulWidget Example')),
      body: Center(
        child: Text(
          'Counter: $_counter',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

In this example, the counter value updates every time the button is pressed. The setState() method notifies Flutter to rebuild the UI with the updated value.

Understanding setState()

The setState() method is used to update the UI when the state changes. It tells Flutter that something has changed, and the framework should rebuild the widget. Without setState(), the UI will not reflect changes in data.

Lifecycle of StatefulWidget

StatefulWidget has a lifecycle that helps manage its behavior efficiently. Important lifecycle methods include: initState() for initialization, build() for rendering UI, setState() for updating UI, and dispose() for cleaning up resources. Understanding lifecycle is important for performance and proper resource handling.

Real-World Use Cases

StatefulWidget is used in many real-world scenarios such as login forms with validation, API data loading screens, shopping cart updates, toggle switches, animations, and live data dashboards. Any situation where UI changes dynamically requires StatefulWidget.

Key Points

StatefulWidget allows dynamic UI updates.
It consists of two classes: Widget and State.
setState() is used to trigger UI rebuild.
Useful for interactive applications.
Lifecycle methods help manage performance.
Always keep state logic clean and minimal.

Common Interview Questions

What is the difference between StatelessWidget and StatefulWidget?
What is setState() and why is it important?
Explain the lifecycle of StatefulWidget.
When should you use StatefulWidget?
Can StatefulWidget rebuild partially or fully?
How do you manage complex state in Flutter?

Test Your Knowledge

of 3

What is the main purpose of StatefulWidget?

To create static UI

To handle dynamic UI changes

To store constants

To improve app size

of 3

Which method is used to update UI in StatefulWidget?

updateUI()

refresh()

setState()

buildState()

of 3

Which class holds the mutable state?

Widget class

State class

BuildContext

MaterialApp

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

import 'package:flutter/material.dart'; class CounterApp extends StatefulWidget { @override _CounterAppState createState() => _CounterAppState(); } class _CounterAppState extends State<CounterApp> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('StatefulWidget Example')), body: Center( child: Text( 'Counter: $_counter', style: TextStyle(fontSize: 24), ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), ); } }

Test Your Knowledge

of 3

What is the main purpose of StatefulWidget?

To create static UI

To handle dynamic UI changes

To store constants

To improve app size

of 3

Which method is used to update UI in StatefulWidget?

updateUI()

refresh()

setState()

buildState()

of 3

Which class holds the mutable state?

Widget class

State class

BuildContext

MaterialApp

Flutter StatefulWidget Tutorial for Beginners

Flutter StatefulWidget Tutorial for Beginners

What is StatefulWidget in Flutter?

Why Use StatefulWidget?

Basic Structure of StatefulWidget

Example: Counter App using StatefulWidget

Understanding setState()

Lifecycle of StatefulWidget

Real-World Use Cases

Key Points

Common Interview Questions

Try it yourself

Test Your Knowledge

Need help?

Flutter StatefulWidget Tutorial for Beginners

Flutter StatefulWidget Tutorial for Beginners

What is StatefulWidget in Flutter?

Why Use StatefulWidget?

Basic Structure of StatefulWidget

Example: Counter App using StatefulWidget

Understanding setState()

Lifecycle of StatefulWidget

Real-World Use Cases

Key Points

Common Interview Questions

Try it yourself

Test Your Knowledge

Need help?