bloc_effects 0.2.0

bloc_effects: ^0.2.0 copied to clipboard

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.

Usage #

Lets take a look at how to use 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();
}

counter_cubit.dart #

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

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

 void onButtonPressed() => useEffect(const ShowBottomSheet());
}

main.dart #

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

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

counter_page.dart #

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: BlocEffectListener<CounterCubit, SomeEffect, int>(
        listener: (context, effect, state) {
          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(),
      ),
    );
  }
}

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(BlocBase bloc, Object? effect) {
   super.onEffect(bloc, effect);
   debugPrint('Used effect: $effect');
 }
// Other [BlocObserver] overrides
}