Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
andrewyng avatar

Bloc Cubit

  • 10 installs
  • 13.9k repo stars
  • Updated May 31, 2026
  • andrewyng/context-hub

bloc-cubit is a Claude skill for Flutter state management that covers when to choose Bloc vs Cubit, bloc and flutter_bloc setup, lifecycle, UI binding, and testing.

About

A Claude skill for Flutter state management with the bloc and flutter_bloc packages. It explains when to choose Cubit for simple updates versus Bloc for event-driven flows, plus project setup, lifecycle and disposal rules, UI binding widgets, and testing patterns. A developer uses it while building a Flutter app to structure state consistently and avoid common pitfalls like network calls in widgets.

  • Guides when to choose Bloc vs Cubit for Flutter state management
  • Covers lifecycle, UI binding (BlocBuilder/BlocListener), and testing rules
  • Gives safe defaults for bloc vs flutter_bloc dependencies

Bloc Cubit by the numbers

  • 10 all-time installs (skills.sh)
  • Ranked #1,685 of 2,244 Frontend Development skills by installs in the Skillselion catalog
  • Data as of Aug 3, 2026 (Skillselion catalog sync)
At a glance

bloc-cubit capabilities & compatibility

Capabilities
frontend · testing
Use cases
frontend · testing
IDEs
vscode
Pricing
Free
From the docs

What bloc-cubit says it does

Do not put network calls directly in widgets.
SKILL.md
npx skills add https://github.com/andrewyng/context-hub --skill bloc-cubit

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs10
repo stars13.9k
Last updatedMay 31, 2026
Repositoryandrewyng/context-hub

What it does

Choose and implement Flutter state management with bloc and flutter_bloc, including lifecycle and testing.

Who is it for?

Structuring state in a Flutter or Dart app with the bloc and flutter_bloc packages.

Skip if: Using Bloc for trivial local state, or putting network calls directly in widgets.

When should I use this skill?

Working with Flutter Bloc/Cubit state management or deciding between Bloc and Cubit.

What you get

Correctly scoped Bloc/Cubit code with proper dependencies, lifecycle, UI binding, and tests.

  • Bloc/Cubit implementation with setup, lifecycle, and testing guidance

By the numbers

  • 6-item minimal reference checklist

Files

SKILL.mdMarkdownGitHub ↗

Flutter Bloc/Cubit State Management

Use this skill when building Flutter state management with bloc and flutter_bloc.

Core Rule

  • Use Cubit for simple, direct state updates.
  • Use Bloc for event-driven flows, transitions, and replayable business logic.
  • Use bloc in Dart-only projects.
  • Use flutter_bloc in Flutter apps when you need widgets like BlocProvider, BlocBuilder, or BlocListener.
  • If you install flutter_bloc, you do not need to add bloc separately in a Flutter app because flutter_bloc depends on it.

Decision Guide

Choose Cubit when:

  • state changes are simple method calls
  • you do not need events
  • the feature is local and low complexity
  • examples include counters, toggles, filters, form flags, and theme mode

Choose Bloc when:

  • user actions should be modeled as explicit events
  • the flow has loading, success, and failure transitions
  • the logic benefits from clear state machines
  • examples include auth, pagination, checkout, sync, and multi-step workflows

Required Project Setup

For Dart-only code:

  • add bloc
  • do not add flutter_bloc unless Flutter widgets are needed

For Flutter UI code:

  • add flutter_bloc
  • let it bring bloc transitively
  • use BlocProvider at the feature boundary
  • use BlocBuilder for rebuilds and BlocListener for side effects

Implementation Pattern

Prefer this structure:

  • repository or service owns I/O
  • bloc/cubit owns state and orchestration
  • UI only dispatches actions and renders state

Keep state immutable. Keep events explicit when using Bloc. Keep one bloc or cubit per feature responsibility.

Lifecycle Rules

  • Close manually created blocs and cubits with close().
  • Do not manually close instances owned by BlocProvider.
  • Use BlocProvider or MultiBlocProvider to let Flutter manage disposal.
  • If you create a bloc/cubit with new or a constructor outside the widget tree, you own its lifecycle.

UI Binding Rules

Use BlocBuilder when the widget should rebuild from state. Use BlocListener when the widget should react without rebuilding. Use BlocConsumer only when both are needed in one place. Use buildWhen and listenWhen when rebuilds or listeners need narrowing. Use BlocSelector when only one field should drive rebuilds.

Testing Rules

  • Test Cubit by calling methods and asserting emitted states.
  • Test Bloc by adding events and asserting the transition sequence.
  • Mock repositories at the boundary, not inside the bloc logic.
  • Test side effects separately from rendering logic.

Common Pitfalls

  • Do not put network calls directly in widgets.
  • Do not use Bloc for trivial local state.
  • Do not add both bloc and flutter_bloc in a Flutter app when only flutter_bloc is needed.
  • Do not forget close() for manually managed instances.
  • Do not emit duplicate states unless the transition is meaningful.
  • Do not let a single bloc grow into an app-wide dumping ground.

What To Prefer In Answers

When writing code or advising on design:

  • show the smallest working Bloc or Cubit first
  • mention why Bloc or Cubit was chosen
  • mention whether the dependency should be bloc or flutter_bloc
  • include cleanup and testing notes if lifecycle is manual
  • keep examples aligned with the current Flutter state management docs and the bloc package docs

Minimal Reference Checklist

  • bloc = core logic package
  • flutter_bloc = Flutter UI integration package
  • Cubit = method-based updates
  • Bloc = event-based transitions
  • manual creation = manual close()
  • provider-owned instance = no manual close()

Related skills

FAQ

When should I use Cubit vs Bloc?

Use Cubit for simple, direct state updates like counters, toggles, and filters, and use Bloc for event-driven flows with loading, success, and failure transitions like auth, pagination, and checkout.

Do I need both bloc and flutter_bloc?

In a Flutter app you add flutter_bloc and let it bring bloc transitively, so you do not add bloc separately.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.