Loading Bloc Builder

Provides special BlocBuilder for displaying the lifecycle of a state with a LoadingStatus


A simple enum that represents four basic statuses an api call can have: initial, loading, success, failure



  1. Create a Bloc or Cubit whose state includes a LoadingStatus
class TestingBloc extends Cubit<TestingState> {
    : super(const TestingState());

  // Make api call here

class TestingState extends Equatable {
  const TestingState({
    this.status = LoadingStatus.initial,
  final LoadingStatus status;

  List<Object> get props => [status];

  TestingState copyWith({
    LoadingStatus? status,
  }) {
    return TestingState(
      status: status ?? this.status,
  1. Provide that Bloc somewhere up in the widget tree:
  create: (context) => TestingBloc();
  child: // widgets here
  1. Lower in the widget tree, implement your LoadingBlocBuilder
LoadingBlocBuilder<TestingBloc, TestingState>(
  statusGetter: (state) => state.status,
  initialBuilder: (_, _state) => const Text('Initial'),
  loadingBuilder: (_, _state) => const Text('Loading'),
  successBuilder: (_, _state) => const Text('Success'),
  failureBuilder: (_, _state) => const Text('Failure'),


  • The successBuilder is the only builder strictly required.
  • If loadingBuilder is not supplied, a CircularProgressIndicator will be rendered.
  • If initialBuilder is not supplied, a SizedBox will be rendered.
  • If failureBuilder is not supplied, an Icon with Icons.error will be rendered.