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.