Skip to content
Knot’s Tools knottx.dev

Free. Instant. Runs in your browser.

Flutter BLoC & Cubit Generator

Type a name like HomeScreen and get the widget with its state and cubit or bloc. Formatted Dart, ready to drop into your lib/ folder.

Name. Any casing works.

Used as typed: HomeScreen, product_detail_page or settings-view.

Pattern. Cubit or Bloc.

cubit/home_screen_state.dart

import 'package:equatable/equatable.dart';

enum HomeScreenStatus {
  initial,
  loading,
  ready,
  failure,
  ;

  bool get isLoading => this == HomeScreenStatus.loading;
}

class HomeScreenState extends Equatable {
  final HomeScreenStatus status;
  final Exception? error;

  const HomeScreenState({
    this.status = HomeScreenStatus.initial,
    this.error,
  });

  @override
  List<Object?> get props => [
    status,
    error,
  ];

  HomeScreenState copyWith({
    HomeScreenStatus? status,
    Exception? error,
  }) {
    return HomeScreenState(
      status: status ?? this.status,
      error: error ?? this.error,
    );
  }

  HomeScreenState loading() {
    return copyWith(
      status: HomeScreenStatus.loading,
    );
  }

  HomeScreenState ready() {
    return copyWith(
      status: HomeScreenStatus.ready,
    );
  }

  HomeScreenState failure(
    Exception error,
  ) {
    return copyWith(
      status: HomeScreenStatus.failure,
      error: error,
    );
  }
}

Download. Folders included.

Files

    Classes

    Install. Two packages.

    flutter pub add flutter_bloc equatable

    Questions? Answers.

    How the generated Flutter BLoC and Cubit code is structured, and how to add it to your app.

    What files does the generator create?

    For Cubit you get three files: home_screen.dart with the widget and its view, cubit/home_screen_cubit.dart and cubit/home_screen_state.dart. Bloc adds bloc/home_screen_event.dart and uses a bloc/ folder. The widget provides the cubit or bloc with BlocProvider and reacts to status changes with BlocListener.

    Should I use Cubit or Bloc?

    Start with Cubit: its methods emit new states directly, so there is less code to write. Choose Bloc when you want every change to start from an event. That makes state changes easy to trace, and lets you debounce or throttle events with transformers.

    Which packages do I need?

    flutter_bloc and equatable. Add both with flutter pub add flutter_bloc equatable. The state class extends Equatable, so listeners only run when the state actually changes.

    How is the name turned into files and classes?

    Type the name in any casing. product_detail_page, ProductDetailPage and product-detail page all give files like product_detail_page.dart and classes like ProductDetailPage, ProductDetailPageCubit and ProductDetailPageState. Nothing is added or removed, so include a suffix such as Screen or Page if you want one.

    Is the generated code formatted?

    Yes. It is laid out the way dart format formats it (80 columns, trailing commas kept) and passes dart analyze with no errors, so it drops into a project without a reformatting diff.

    Is my code uploaded anywhere?

    No. Everything is generated in your browser, including the ZIP file. There is no server, account or tracking.