flutter-context-watch-instead-of-top-builder

star 0

Refactors Flutter widgets to replace top-level BlocBuilder wrappers with context.watch-based state reads while preserving behavior. Use when the user asks to remove BlocBuilder at page/widget root, use context.watch, or simplify Flutter BLoC widget trees.

leancodepl By leancodepl schedule Updated 5/30/2026

name: flutter-context-watch-instead-of-top-builder description: Refactors Flutter widgets to replace top-level BlocBuilder wrappers with context.watch-based state reads while preserving behavior. Use when the user asks to remove BlocBuilder at page/widget root, use context.watch, or simplify Flutter BLoC widget trees.

Flutter context.watch Instead of Top Builder

Goal

Replace a top-level BlocBuilder<Cubit, State> with context.watch<Cubit>() in build, while keeping the same UI behavior.

Workflow

  1. Identify a root BlocBuilder wrapping most of the screen.
  2. Inside build, read the cubit once:
    • final cubit = context.watch<MyCubit>();
    • final state = cubit.state;
  3. Remove the outer BlocBuilder and return the wrapped widget directly.
  4. Keep write actions as context.read<MyCubit>() in handlers (onTap, submit, etc.).
  5. If presentation stream listeners exist (for useOnStreamChange), use cubit.presentation so there is a single watched cubit reference.
  6. Validate no behavior changes: loading, list size, buttons, and side effects should match previous logic.

Guardrails

  • Only refactor when the top-level builder is a straightforward state passthrough.
  • Do not change business logic, event handling, or navigation.
  • Do not introduce extra rebuild scopes accidentally; watch only the cubit needed by this widget.
  • Preserve existing analytics IDs and localization usage.

Example Pattern

// Before
return BlocBuilder<MyCubit, MyState>(
  builder: (context, state) => MyScaffold(
    isLoading: state.isLoading,
  ),
);
// After
final cubit = context.watch<MyCubit>();
final state = cubit.state;

return MyScaffold(
  isLoading: state.isLoading,
);
Install via CLI
npx skills add https://github.com/leancodepl/ai-plugins --skill flutter-context-watch-instead-of-top-builder
Repository Details
star Stars 0
call_split Forks 0
navigation Branch main
article Path SKILL.md
More from Creator