wyatt-packages/packages/wyatt_bloc_helper

Flutter - BloC Helper

BloC Pattern utilities for Flutter.

Using

Mixin Helper

In any custom screen you can get quick access to bloc or repository by using the mixin helper.

add(context, CounterIncrement());

// or, if you want to use Cubit

bloc(context).increment();

Note: in this context bloc returns a Cubit instance.

final repository = repo<CounterRepository>(context);

Only BlocProvider

If you want to use only BlocProvider you have to extends BlocProviderScreen or CubitProviderScreen depending on your use case.

class CounterPage extends BlocProviderScreen<CounterBloc, CounterEvent, CounterState> {
    const CounterPage({super.key});
    //...
}

// or, if you want to use Cubit

class CounterPage extends CubitProviderScreen<CounterCubit, CounterState> {
    const CounterPage({super.key});
    //...
}

Then, create a Bloc or Cubit instance by implementing the create method.

@override
CounterBloc create(BuildContext context) => CounterBloc();

// or, if you want to use Cubit

@override
CounterCubit create(BuildContext context) => CounterCubit();

Finaly, you have to implement the buildChild method to build your screen.

@override
Widget buildChild(BuildContext context) {
    // return ...
}

Note: here, you can use BlocBuilder, BlocListener,... and access Bloc and Repository instance with the mixin helper.

Only BlocConsumer

If you want to use only BlocConsumer you have to extends BlocConsumerScreen or CubitConsumerScreen depending on your use case.

Note: using directly BlocConsumer assumes you have already provided a Bloc or Cubit instance.

class CounterPage extends BlocConsumerScreen<CounterBloc, CounterEvent, CounterState> {
    const CounterPage({super.key});
}

// or, if you want to use Cubit

class CounterPage extends CubitConsumerScreen<CounterCubit, CounterState> {
    const CounterPage({super.key});
}

Then, just implement the onBuild method to build your screen.

@override
Widget onBuild(BuildContext context, CounterState state) {
    return Text(state.count.toString());
    // or... more complex widgets
}

If needed, you can wrap what depends on the state with the function onWrap.

@override
Widget onWrap(BuildContext context, Widget child) {
    return Scaffold(
        appBar: AppBar(
            title: const Text('Title'),
        ),
        body: child,
    );

Note: you can override onBuild, but also onListen, shouldBuildWhen and shouldListenWhen methods.

Both BlocProvider and BlocConsumer

You can use both BlocProvider and BlocConsumer in the same screen, with the BlocScreen or CubitScreen depending on your use case.

class CounterPage extends BlocScreen<CounterBloc, CounterEvent, CounterState> {
    const CounterPage({super.key});
}

// or, if you want to use Cubit

class CounterPage extends CubitScreen<CounterCubit, CounterState> {
    const CounterPage({super.key});
}

Then, you can create a Bloc or Cubit instance by implementing the create method.

@override
CounterBloc create(BuildContext context) => CounterBloc();

// or, if you want to use Cubit

@override
CounterCubit create(BuildContext context) => CounterCubit();

And, finally, just implement the onBuild method to build your screen.

@override
Widget onBuild(BuildContext context, CounterState state) {
    return Text(state.count.toString());
    // or... more complex widgets
}

Note: check BlocProvider and BlocConsumer documentation for more information.

You'll find a more examples in the example/lib/counter/ directory.