bloc_effects 0.1.0-dev.1

bloc_effects: ^0.1.0-dev.1 copied to clipboard

Cubit and Bloc abstractions 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(),
      ),
    );
  }
}