Understanding Flutter Widget Lifecycle: StatelessWidget and StatefulWidget

The widget lifecycle in Flutter describes the complete process from a widget being loaded to its removal, and understanding it helps developers perform actions at the appropriate moments.

StatelessWidget is a widget without mutable state; it only implements the build method, which is called on every UI refresh. Because it cannot call setState, its internal properties should be declared final, and any business logic should be placed in the constructor rather than in build.

StatefulWidget has an associated State object that can change over time. Its lifecycle is managed mainly inside the State class and includes the following callbacks: initState: called once when the state is inserted into the widget tree; used for one‑time initialization. didChangeDependencies: invoked when an inherited widget the state depends on changes (e.g., locale or theme). build: constructs the widget UI; called after initState, didUpdateWidget, setState, didChangeDependencies, or when the state is re‑attached. reassemble: called only during hot‑reload in development mode. didUpdateWidget: triggered when the parent widget rebuilds and provides a new configuration. deactivate: runs when the state is removed from the tree; may be followed by a re‑attachment. dispose: final callback when the state is permanently removed; used to release resources.

The article includes a complete example that displays a random number and prints lifecycle callbacks:

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: RandomPage(),
      ),
    );
  }
}

class RandomPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _RandomPageState();
}

class _RandomPageState extends State<RandomPage> {
  final _randomBuild = Random();
  int _randomValue = 0;

  @override
  void initState() {
    super.initState();
    print('initState');
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('didChangeDependencies');
  }

  @override
  Widget build(BuildContext context) {
    print('build');
    return Container(
      child: Padding(
        padding: EdgeInsets.only(top: 100),
        child: Center(
          child: Column(
            children: [
              Text('随机数: $_randomValue'),
              SizedBox(height: 200),
              TextButton(
                child: Text('切换随机数'),
                onPressed: () {
                  setState(() {
                    _randomValue = _randomBuild.nextInt(10000);
                  });
                },
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  void reassemble() {
    super.reassemble();
    print('reassemble');
  }

  @override
  void didUpdateWidget(covariant RandomPage oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('didUpdateWidget');
  }

  @override
  void deactivate() {
    super.deactivate();
    print('deactivate');
  }

  @override
  void dispose() {
    super.dispose();
    print('dispose');
  }
}

Running the app prints:

flutter: initState
flutter: didChangeDependencies
flutter: build

Pressing the "切换随机数" button triggers setState and prints:

flutter: build

Performing a hot‑reload prints:

flutter: reassemble
flutter: didUpdateWidget
flutter: build

For app‑level lifecycle, implement WidgetsBindingObserver and override didChangeAppLifecycleState. The three most common AppLifecycleState values are resumed, inactive, and paused:

class _RandomPageState extends State<RandomPage> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance?.removeObserver(this);
    super.dispose();
  }

  void didChangeAppLifecycleState(AppLifecycleState state) async {
    if (state == AppLifecycleState.resumed) {
      getData();
    }
  }

  @override
  Widget build(BuildContext context) {
    throw UnimplementedError();
  }

  void getData() {}
}

Additional notes: addPostFrameCallback can be used in initState to run code after the first frame is rendered.

The mounted property indicates whether the state is currently attached to the widget tree; checking if (mounted) { setState(...); } prevents exceptions when the widget is no longer in the tree.

A state can be dirty (needs a rebuild) or clean (no rebuild pending).