bloc_effects 2.0.0 copy "bloc_effects: ^2.0.0" to clipboard
bloc_effects: ^2.0.0 copied to clipboard

Cubit and Bloc abstractions and Flutter Widget that make it easy to add UI Effects to the BLoC state management.

SingleLiveEvent pattern implementation for Cubit and Bloc

Pub codecov style: lint

Bloc Effects Package

The abstractions on Cubit and Bloc and Flutter Widget that make it easy to add UI Effects to the BLoC state management using [package:bloc](https://pub.dev/packages/bloc).

Usage #

Lets take a look at how to use mixin Effects or class CubitWithEffects to dispatch effects from CounterCubit to a CounterPage and react on them with BlocEffectListener.

ui_effect.dart #

abstract class UiEffect {}

class ShowBottomSheet implements UiEffect {
 const ShowBottomSheet({required this.counterValue});
 
 final int counterValue;
}
copied to clipboard

counter_cubit.dart #

class CounterCubit extends Cubit<int> with Effects<UiEffect> {
 CounterCubit() : super(0);

 void increment() => emit(state + 1);

 void onButtonPressed() => emitEffect(ShowBottomSheet(counterValue: state));
}
copied to clipboard

or the same with the class extension:

class CounterCubit extends CubitWithEffects<int, UiEffect> {
 CounterCubit() : super(0);

 void increment() => emit(state + 1);

 void onButtonPressed() => emitEffect(ShowBottomSheet(counterValue: state));
}
copied to clipboard

main.dart #

void main() => runApp(CounterApp());

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => CounterCubit(),
        child: CounterPage(),
      ),
    );
  }
}
copied to clipboard

counter_page.dart #

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: BlocEffectListener<CounterCubit, UiEffect>(
        listener: (context, effect) {
          if (effect is ShowBottomSheet) {
            showBottomSheet<void>(
              context: context,
              builder: (c) =>
                  Material(
                    child: Container(
                      color: Colors.black12,
                      height: 150,
                    ),
                  ),
            );
          }
        },
        child: const Sizedbox(),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.upload),
        onPressed: () => context.read<CounterCubit>().onButtonPressed(),
      ),
    );
  }
}
copied to clipboard

And also BlocWithEffectsObserver can be useful. It extends BlocObserver and add onEffect callback to base observing features:

app_bloc_observer.dart #

class AppBlocObserver extends BlocWithEffectsObserver {
 @override
 void onEffect(Object effect) {
   super.onEffect(effect);
   debugPrint('Used effect: $effect');
 }
// Other [BlocObserver] overrides
}
copied to clipboard
15
likes
160
points
1.72k
downloads

Publisher

verified publisherdarttech.dev

Weekly Downloads

2024.07.29 - 2025.02.10

Cubit and Bloc abstractions and Flutter Widget that make it easy to add UI Effects to the BLoC state management.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, flutter_bloc

More

Packages that depend on bloc_effects