divine-mobile: Skill for Claude Code

Flutter: setState During Build from deactivate()

Problem

When navigating away from a screen, calling methods like VideoPlayerController.pause() in deactivate() triggers setState() or markNeedsBuild() called during build because the controller notifies its listeners synchronously during widget tree teardown.

Context / Trigger Conditions

• Error: setState() or markNeedsBuild() called during build
• Stack trace includes:
  • YourWidget.deactivate
  • VideoPlayerController.pause (or similar)
  • ChangeNotifier.notifyListeners
  • ValueListenableBuilder._valueChanged
• Widget using ValueListenableBuilder<VideoPlayerValue> or similar
• Trying to pause/stop media playback when navigating away

Solution

Defer the state-modifying operation to after the current frame:

@override
void deactivate() {
  // Capture controller reference while ref/context is still valid
  final controller = _getController();

  // Defer pause to after current frame
  if (controller != null && controller.value.isPlaying) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (controller.value.isPlaying) {
        controller.pause();
      }
    });
  }

  super.deactivate();
}

Key Insights

1. Why deactivate() is problematic: It's called during the widget tree teardown phase, which is part of the build process. Any synchronous notification to listeners will trigger rebuilds during build.

2. Why dispose() doesn't have this issue: By dispose(), the widget is fully unmounted and listeners are typically already removed.

3. Capture references early: Get controller/state references before the async gap since ref, context, or other widget state may become invalid.

4. Guard against double-execution: Check isPlaying again in the callback since state may have changed.

Verification

• Navigate away from the screen multiple times
• No error in console
• Video/audio properly pauses when leaving

Example: Full Implementation