무료GitHub에 공개

implementing-flutter-bloc

Implements BLoC (v9.x) event-driven state management for Flutter with unidirectional data flow using the flutter_bloc package. Use when implementing Bloc/Cubit classes, mapping Events to States, consuming state with BlocBuilder/BlocListener/BlocConsumer, applying event transformers (restartable/droppable/sequential) for concurrency control, setting up BlocProvider/MultiBlocProvider DI, integrating Freezed for sealed union types and exhaustive pattern matching, or testing with blocTest. Ideal for enterprise apps requiring business logic separation, precise concurrency control (search debouncing, form deduplication), or event replay debugging.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills

설치 방법 보기

포함된 파일(4)

SKILL.md5.2 KB
references/bloc.md14.5 KB
references/errors.md3.5 KB
references/state-management-overview.md6.5 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

BLoC State Management (v9.x)

Goal

Strict separation of UI from business logic via event-driven unidirectional data flow. Choose Cubit (lightweight, no events) for simple state, or full Bloc (events + transformers) for complex flows.

Process

1. Install Dependencies

dependencies:
  flutter_bloc: ^9.1.1
  equatable: ^2.0.5
  bloc_concurrency: ^0.3.0  # For event transformers

dev_dependencies:
  bloc_test: ^10.0.0

2. Choose Pattern

Pattern	When to Use
Cubit	Simple state (toggle, counter, form validation)
Bloc	Event tracking, transformers, complex flows (login, search debounce)

3A. Implement Cubit

class CounterState extends Equatable {
  final int value;
  const CounterState({required this.value});
  @override
  List<Object?> get props => [value];
}

class CounterCubit extends Cubit<CounterState> {
  CounterCubit() : super(const CounterState(value: 0));
  void increment() => emit(CounterState(value: state.value + 1));
  void decrement() => emit(CounterState(value: state.value - 1));
}

3B. Implement Bloc

abstract class CounterEvent extends Equatable {
  const CounterEvent();
  @override
  List<Object?> get props => [];
}
class CounterIncremented extends CounterEvent {}
class CounterDecremented extends CounterEvent {}

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(const CounterState(value: 0)) {
    on<CounterIncremented>((e, emit) => emit(CounterState(value: state.value + 1)));
    on<CounterDecremented>((e, emit) => emit(CounterState(value: state.value - 1)));
  }
}

4. Provide to Widget Tree

MultiBlocProvider(
  providers: [
    BlocProvider(create: (context) => CounterCubit()),
    BlocProvider(create: (context) => AuthBloc()),
  ],
  child: MyApp(),
)

5. Consume State

Widget	Use For
`BlocBuilder`	Rebuild UI on state changes
`BlocListener`	Side effects only (navigation, snackbars)
`BlocConsumer`	Rebuild + side effects together

// Trigger events
context.read<CounterBloc>().add(CounterIncremented());
context.read<CounterCubit>().increment(); // Cubit: direct method call

See BLoC Best Practices for full widget examples with buildWhen/listenWhen.

6. Event Transformers

Transformer	Behavior	Use Case
`concurrent` (default)	All events in parallel	Independent API calls
`sequential`	One at a time, queued	Multi-step transactions
`restartable`	Cancel previous, start fresh	Search bar, autocomplete
`droppable`	Ignore while processing	Submit button deduplication

import 'package:bloc_concurrency/bloc_concurrency.dart';

on<SearchQueryChanged>(_onQueryChanged, transformer: restartable());
on<FormSubmitted>(_onFormSubmitted, transformer: droppable());

See BLoC Best Practices for custom debounce transformer.

7. Freezed Integration

Use Freezed for sealed union states with exhaustive when/map pattern matching. See BLoC Best Practices for full Freezed setup and examples.

8. Common Errors

See Error Handling & Common Pitfalls for solutions to:

Emitting after Bloc close (emit.isDone guard)
Mutable state causing silent UI bugs (spread into new instances)
Scattered try/catch — use onError + addError instead

Reference Documentation

BLoC Best Practices (v9.x) — Transformers, Freezed, testing with blocTest, hydrated/replay packages
Error Handling & Common Pitfalls — Three common errors with before/after fixes
State Management Overview — Cubit vs Provider/MVVM comparison

Constraints

Immutable States: All states MUST be immutable. Use Equatable or Freezed.
No UI in Bloc: Blocs/Cubits MUST NOT import Flutter widgets or BuildContext.
Single Responsibility: Each Bloc handles one feature domain.
Event Naming: Past tense nouns (UserLoggedIn, not UserLogin).
State Naming: Nouns or adjectives (AuthSuccess, not AuthSucceeded).
Always Close: Blocs/Cubits MUST be closed on dispose to prevent memory leaks.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬

animating-flutter-widgets

무료

Declarative animation patterns using flutter_animate v4.5.x with composable effects (fade, scale, slide, shimmer, shake, blur), GLSL fragment shaders, and scroll-synchronized animations. Use this skill for adding UI animations and transitions, building staggered or sequenced effects, creating custom animation effects, fixing animation jank or performance issues, implementing shimmer loading states, or adding scroll-driven animations. Supports delays, curves, adaptive effects, and easy extension method chaining (.animate()).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills72026년 8월 11일 업데이트

applying-effective-dart

무료

Dart 3 modern features (through 3.10) and Effective Dart best practices including records, patterns, sealed classes, dot shorthands, null-aware collection elements, and wildcard variables. Use when adopting Dart 3.7+ syntax, using dot shorthands for enums or static members, using null-aware elements in lists or maps, using wildcard _ parameters, improving code quality, or reviewing Dart code conventions.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills72026년 8월 11일 업데이트

building-flutter-production-apps

무료

Expert-level guidance for Flutter production applications: architecture decisions (Clean/Layered/Hexagonal/Feature-First), advanced state management (BLoC/Riverpod/GetX), performance optimization (eliminating jank, memory profiling, reducing rebuild overhead), code review with design pattern enforcement, scalability assessments, native platform integration (MethodChannel/EventChannel/FFI), complex UI challenges (custom render objects, slivers), testing strategies (unit/widget/integration/golden), CI/CD pipeline architecture, build optimization, and accessibility compliance. Triggers: 'architecture decision', 'design pattern', 'performance issue', 'code review', 'production problem', 'scaling concerns', 'best practices', 'technical debt', 'refactoring strategy'. Essential for complex enterprise apps, critical production debugging, architectural refactors, or when choosing between competing technical approaches.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills72026년 8월 11일 업데이트

building-jaspr-web-apps

무료

Builds SEO-friendly web applications with Dart using the Jaspr framework. Use when creating Dart-based websites, blogs, or landing pages requiring semantic HTML output; implementing server-side rendering (SSR) or static site generation (SSG); adding Tailwind CSS via jaspr_tailwind; routing with jaspr_router; testing components with jaspr_test; or building full-stack Dart web apps where Flutter Web's canvas rendering is unsuitable.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills72026년 8월 11일 업데이트

building-shadcn-flutter-ui

무료

shadcn_flutter UI component library for building accessible, themed Flutter interfaces. Use when integrating shadcn components, configuring design system theming, or building consistent widget layouts.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills72026년 8월 11일 업데이트

configuring-codemagic

무료

Configures Codemagic CI/CD pipelines for Flutter using `codemagic.yaml`. Use when setting up automated Flutter builds on Codemagic, configuring iOS code signing without Fastlane Match, deploying to App Store Connect or Google Play from Codemagic, caching pub dependencies in Codemagic, setting up encrypted environment variable groups, running tests with Codemagic's test dashboard, or choosing between Codemagic and GitHub Actions + Fastlane for a Flutter CI/CD pipeline.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Poorgramer-Zack/dart-expert-skills72026년 8월 11일 업데이트

Poorgramer-Zack의 스킬 모두 보기

이 스킬의 문제 신고

설치

명령으로 설치

npx skills add https://github.com/Poorgramer-Zack/dart-expert-skills --skill implementing-flutter-bloc

터미널에 붙여 넣고 실행합니다(Node.js 필요). Claude Code, Codex 등 설치할 에이전트를 고를 수 있습니다.

에이전트에게 부탁하기

다음 Agent Skill을 설치해 주세요.
https://github.com/Poorgramer-Zack/dart-expert-skills/tree/main/skills/flutter-bloc

먼저 SKILL.md와 첨부 파일의 내용을 확인해 수상한 처리(외부 전송, 인증 정보 읽기 등)가 없는지 확인한 뒤 Claude Code는 ~/.claude/skills/implementing-flutter-bloc/, Codex는 ~/.agents/skills/implementing-flutter-bloc/ 에 배치해 주세요.

이 문장을 그대로 Claude Code나 Codex에 보내면 내용을 확인한 뒤 설치해 줍니다.

GitHub에서 소스 보기

저장소: Poorgramer-Zack/dart-expert-skills
스타: 7
포크: 2
카테고리: 테스트·보안
라이선스: MIT
원문 언어: 영어
최종 업데이트: 2026년 8월 11일

스킬은 에이전트를 위한 지시와 스크립트의 묶음입니다. cccskills는 내용의 안전성을 보증하지 않습니다. 설치하기 전에 내용을 확인하세요.