Using multiple BlocBuilder of same Bloc/Cubit, each for different events

Question

Like this below official code sample, I used two BlocBuilder of CounterCubit for two different events increment and decrement.

It's running without any error, but both BlocBuilders are calling on each event.

I want one Builder should call on increment and one Builder should call on decrement.

class CounterView extends StatelessWidget {

@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;

return Scaffold(
  appBar: AppBar(title: const Text('Counter')),
  body: Center(
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
        BlocBuilder<CounterCubit, int>(
          builder: (context, state) {
            return Text('Increment $state', style: textTheme.headline2);
          },
        ),
        BlocBuilder<CounterCubit, int>(
          builder: (context, state) {
            return Text('Decrement $state', style: textTheme.headline2);
          },
        ),
      ])),
  floatingActionButton: Column(
    mainAxisAlignment: MainAxisAlignment.end,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: <Widget>[
      FloatingActionButton(
        key: const Key('counterView_increment_floatingActionButton'),
        child: const Icon(Icons.add),
        onPressed: () => context.read<CounterCubit>().increment(),
      ),
      const SizedBox(height: 8),
      FloatingActionButton(
        key: const Key('counterView_decrement_floatingActionButton'),
        child: const Icon(Icons.remove),
        onPressed: () => context.read<CounterCubit>().decrement(),
      ),
    ],
  ),
 );
 }
}

Can I achieve this using a single CounterCubit?

Or I need to create two different Cubit classes like IncrementCubit and DecrementCubit.

Do you need two different counters, or just rebuild the UI on a specific event? — croxx5f, Nov 23 '21 at 14:37

score 0 · Answer 1 · answered Nov 23 '21 at 15:19

0

Your counter cubit should emit both an increment and a decrement state. One BlocBuilder is all you should use to keep it simple. Please reference the bloc documents here

answered Nov 23 '21 at 15:19

Nick C.

71
5

1

Yes, my counter cubit are emitting for both increment and decrement state, But i want to update one widget on increment and another widget on decrement, and both widget can be anywhere on the screen, So I want separate bloc builders for each. – Deven Nov 24 '21 at 07:03
If you provide the bloc builder to the entire widget, the states will be accessible . Then create an if else statement for the states. – Nick C. Nov 25 '21 at 17:01
My screen has many other widgets also, so if we provide bloc builder to the entire widget then it will unnecessary rebuild other widgets also, but I want to rebuild only two widgets with respect to increment and decrement results. – Deven Nov 26 '21 at 05:36
@Deven have you found the solution? Currently I really need something like getx multiple instance controller in Cubit, but I can't find any solution yet. – DanielSeow Mar 07 '22 at 15:45

score 0 · Answer 2 · answered May 22 '22 at 02:40

In your cubit state, instead of just an integer, you can wrap it with a denote of your intended action (increment or decrement). Within you BlocBuilder, check the intended action and update the view. Something like this:

BlocBuilder<CounterCubit, CounterCubitState>(
      builder: (context, state) {
        if (state.intendedOperation == increment)
         return Text('Increment $state', style: textTheme.headline2);
      },
    ),

You can also create 2 cubits as you mentioned. That's fine, but then you will have to manage the counter value in a common store (such as a repository).

Using multiple BlocBuilder of same Bloc/Cubit, each for different events

2 Answers2