bloc_effects 0.1.0

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

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 onButtonPress() => 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>().onButtonPress(),
      ),
    );
  }
}