flutter-patterns

Flutter Patterns Skill

Instructions for AI

Apply modern Flutter and Dart patterns, production-grade standards, and iOS-optimized practices. Use this skill when writing, reviewing, or refactoring Flutter/Dart code. Follow Clean Architecture with clear separation of presentation, domain, and data layers.

Core Patterns

1. BLoC Pattern — Events, States, BLoC

Separate user interactions (events) from UI representation (states) via a BLoC mediator.

// Events — what the user does
@freezed
class ProductEvent with _$ProductEvent {
  const factory ProductEvent.load({String? category}) = _Load;
  const factory ProductEvent.search(String query) = _Search;
  const factory ProductEvent.addToCart(String productId) = _AddToCart;
}

// States — what the UI shows
@freezed
class ProductState with _$ProductState {
  const factory ProductState.initial() = _Initial;
  const factory ProductState.loading() = _Loading;
  const factory ProductState.loaded({
    required List<Product> products,
    required String? activeCategory,
  }) = _Loaded;
  const factory ProductState.error(String message) = _Error;
}

// BLoC — transforms events into states
class ProductBloc extends Bloc<ProductEvent, ProductState> {
  final GetProducts _getProducts;
  final AddToCart _addToCart;

  ProductBloc({
    required GetProducts getProducts,
    required AddToCart addToCart,
  })  : _getProducts = getProducts,
        _addToCart = addToCart,
        super(const ProductState.initial()) {
    on<_Load>(_onLoad);
    on<_Search>(_onSearch);
    on<_AddToCart>(_onAddToCart);
  }

  Future<void> _onLoad(_Load event, Emitter<ProductState> emit) async {
    emit(const ProductState.loading());
    final result = await _getProducts(GetProductsParams(category: event.category));
    result.fold(
      (failure) => emit(ProductState.error(failure.message)),
      (products) => emit(ProductState.loaded(
        products: products,
        activeCategory: event.category,
      )),
    );
  }
}