Flutter Bloc does not update ui

Question

I want to update the counter everytime user increments the cart but I wasn't able to do this because bloc does not call bloc builder. I am a newbie so please forgive me if I dont convey my problem correctly.

I think this is happen because I am yield the same state everytime but I did not find any solution for this.

Please help me.

this is my bloc file.

import 'dart:async';

import 'package:bloc/bloc.dart';
import 'package:brooklyn_bites/Infrastructure/core/app_database.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:injectable/injectable.dart';

part 'manage_cart_state.dart';
part 'manage_cart_event.dart';
part 'manage_cart_bloc.freezed.dart';

@injectable
class ManageCartBloc extends Bloc<ManageCartEvent, ManageCartState> {
  ManageCartBloc(this.db) : super(ManageCartState.initial());

  final AppDatabase db;

  @override
  Stream<ManageCartState> mapEventToState(ManageCartEvent gEvent) async* {
    if (gEvent is _AddItemToCart) {
      yield state.copyWith(
        cartItems: List.from(
          state.cartItems
            ..add(
              CartItems(
                productId: gEvent.product.id,
                quantity: gEvent.quantity,
              ),
            ),
        ),
      );
    }

    if (gEvent is _RemoveItemFromCart) {
      yield state.copyWith(
          cartItems: List.from(state.cartItems
            ..remove(CartItems(
                productId: gEvent.product.id, quantity: gEvent.quantity))));
    }

    if (gEvent is _UpdateCartItem) {
      yield state.copyWith(
        cartItems: List.from(state.cartItems)
          ..where((element) => element.productId == gEvent.productId)
              .first
              .quantity += 1,
      );
    }
  }
}

this is my bloc_builder

    class CartCounter extends StatelessWidget {
  final Product product;

  const CartCounter({Key key, this.product}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ManageCartBloc, ManageCartState>(
      builder: (context, state) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            
            Row(
              children: [
                if (state.cartItems.isEmpty ||
                    state.cartItems
                        .where((element) => element.productId == product.id)
                        .isEmpty)
                  Container()
                else
                  IconButton(
                      icon: Icon(
                        Icons.remove_circle_outline,
                        color: Colors.yellow[700],
                      ),
                      onPressed: () {
                        state.cartItems
                                .where((element) =>
                                    element.productId == product.id)
                                .isNotEmpty ??
                            context.bloc<ManageCartBloc>().add(
                                  ManageCartEvent.removeItemFromCart(
                                    product: product,
                                    quantity: state.cartItems
                                        .where((element) =>
                                            element.productId == product.id)
                                        .first
                                        .quantity--,
                                  ),
                                );
                      }),
                Text(
                  state.cartItems.isEmpty ||
                          state.cartItems
                              .where(
                                  (element) => element.productId == product.id)
                              .isEmpty
                      ? '0'
                      : state.cartItems
                          .where((element) => element.productId == product.id)
                          .first
                          .quantity
                          .toString(),
                  style: const TextStyle(
                      fontWeight: FontWeight.bold, fontSize: 18),
                ),
                IconButton(
                  icon: Icon(
                    Icons.add_circle_outline,
                    color: Colors.yellow[700],
                  ),
                  onPressed: () {
                    state.cartItems
                            .where((element) => element.productId == product.id)
                            .isNotEmpty
                        ? context.bloc<ManageCartBloc>().add(
                            ManageCartEvent.updateCartItem(
                                productId: product.id))
                        : context.bloc<ManageCartBloc>().add(
                              ManageCartEvent.addItemToCart(
                                product: product,
                                quantity: 1,
                              ),
                            );
                  },
                ),
              ],
            ),
          ],
        );
      },
    );
  }
}

Answer 1

In my case I do not override hashcode & == for CartItems. I can done this with Freeezed Union (It can also be done with Equatable). Imp Note: If your state extends Equatable then all properties need to also extend Equatable.

Answer 2

I had the same problem, you can clean your project with flutter clean and rerun the project. If it doesn't help, you can use the BlocConsumer widget to handle bloc states. I recommend you to see bloc timer project.