Explain clearly about difference between deactivate vs dispose in lifecycle of stateful widgets in flutter with some proper examples

Overview

Both

deactivate()

dispose()

• textCopy

  deactivate()

  — Called when the widget is temporarily removed from the widget tree. The widget might come back.
• textCopy

  dispose()

  — Called when the widget is permanently removed from the widget tree. The widget will never come back.

Lifecycle Flow

textCopy
Widget in tree (active)
        │
        ▼
   deactivate()      ← Widget removed from tree (temporary)
        │
        ├──→ Widget re-inserted? → didChangeDependencies() → build()
        │    (e.g., moved with GlobalKey)
        │
        ▼
    dispose()         ← Widget permanently destroyed (final cleanup)
        │
        ▼
   mounted = false    ← State object is dead, never reused

deactivate() — Temporary Removal

deactivate()

GlobalKey

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

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  void deactivate() {
    // ✅ Called when widget is removed from tree
    // Widget MIGHT be re-inserted somewhere else
    print('deactivate — removed from tree (maybe temporarily)');

    // Good for:
    // - Removing references from parent/ancestor widgets
    // - Unregistering from InheritedWidget subscriptions
    // - Pausing operations that depend on tree position

    super.deactivate();  // Call super at the END
  }

  @override
  Widget build(BuildContext context) => Text('Hello');
}

When Does deactivate() Fire?

dartCopy
// 1. Widget removed from tree by parent rebuild
class Parent extends StatefulWidget {
  @override
  _ParentState createState() => _ParentState();
}

class _ParentState extends State<Parent> {
  bool showChild = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (showChild) MyWidget(),  // Removing this triggers deactivate()
        ElevatedButton(
          onPressed: () => setState(() => showChild = false),
          child: Text('Remove Child'),
        ),
      ],
    );
  }
}
// Press button → MyWidget.deactivate() → MyWidget.dispose()

dartCopy
// 2. Widget MOVED using GlobalKey (deactivate WITHOUT dispose)
final key = GlobalKey();

// Before: MyWidget is in Column A
Column(children: [MyWidget(key: key)])

// After: MyWidget moved to Column B
Row(children: [MyWidget(key: key)])

// Flow: deactivate() → re-insert → didChangeDependencies() → build()
// dispose() is NOT called — widget was moved, not destroyed

dispose() — Permanent Destruction

dispose()

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

  @override
  State<TimerWidget> createState() => _TimerWidgetState();
}

class _TimerWidgetState extends State<TimerWidget> {
  late final TextEditingController _textController;
  late final ScrollController _scrollController;
  late final AnimationController _animController;
  Timer? _timer;
  StreamSubscription? _subscription;

  @override
  void initState() {
    super.initState();
    _textController = TextEditingController();
    _scrollController = ScrollController();
    _timer = Timer.periodic(Duration(seconds: 1), (_) => _tick());
    _subscription = myStream.listen((data) => _handleData(data));
  }

  void _tick() => print('tick');
  void _handleData(dynamic data) => print(data);

  @override
  void dispose() {
    // ✅ Clean up ALL resources here — widget will NEVER come back
    _textController.dispose();     // Free text controller
    _scrollController.dispose();   // Free scroll controller
    _animController.dispose();     // Free animation controller
    _timer?.cancel();              // Stop timer
    _subscription?.cancel();       // Cancel stream subscription

    print('dispose — permanently destroyed, resources freed');
    super.dispose();  // Call super at the END
  }

  @override
  Widget build(BuildContext context) => TextField(controller: _textController);
}

Key Difference: GlobalKey Example

This is the best example to understand the difference — when a widget is moved instead of destroyed:

dartCopy
class GlobalKeyExample extends StatefulWidget {
  @override
  _GlobalKeyExampleState createState() => _GlobalKeyExampleState();
}

class _GlobalKeyExampleState extends State<GlobalKeyExample> {
  final _childKey = GlobalKey();
  bool isLeft = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            // Widget moves between left and right
            if (isLeft)
              Expanded(child: CounterWidget(key: _childKey)),
            if (!isLeft)
              Expanded(child: SizedBox()),
            if (!isLeft)
              Expanded(child: CounterWidget(key: _childKey)),
            if (isLeft)
              Expanded(child: SizedBox()),
          ],
        ),
        ElevatedButton(
          onPressed: () => setState(() => isLeft = !isLeft),
          child: Text('Move Widget'),
        ),
      ],
    );
  }
}

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int count = 0;

  @override
  void deactivate() {
    print('deactivate — removed from current position');
    super.deactivate();
  }

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => setState(() => count++),
      child: Text('Count: $count'),
    );
  }
}

// Press "Move Widget" button:
// Output: "deactivate — removed from current position"
// ❌ dispose() is NOT called!
// Widget moves to new position with state PRESERVED (count stays same)

What to Do in Each Method

deactivate()

dispose()

InheritedWidget

mounted

Comparison Table

deactivate()

dispose()

GlobalKey

super.deactivate()

super.dispose()

Common Mistakes

dartCopy
// ❌ Wrong — disposing resources in deactivate
@override
void deactivate() {
  _controller.dispose();  // ❌ Widget might come back!
  super.deactivate();
}

// ✅ Correct — dispose resources only in dispose()
@override
void dispose() {
  _controller.dispose();  // ✅ Widget is gone forever
  super.dispose();
}

// ❌ Wrong — calling super first in dispose
@override
void dispose() {
  super.dispose();          // ❌ State invalidated before cleanup
  _controller.dispose();    // May crash — state already dead
}

// ✅ Correct — call super.dispose() LAST
@override
void dispose() {
  _controller.dispose();    // ✅ Clean up first
  super.dispose();          // ✅ Then invalidate state
}

Rule of Thumb: Put resource cleanup (controllers, timers, streams, listeners) in

textCopy

dispose()

— not

textCopy

deactivate()

. You only need

textCopy

deactivate()

in rare cases where your widget interacts with ancestor widgets and needs to unregister when moved. 99% of the time, you only need

textCopy

dispose()

.