Shopping cart using bloc does not update cart count - flutter

Question

I'm trying to build a simple shopping cart using bloc. It works fine but the only issue is the cart count doesn't get updated when I add/remove the item. I need to switch to the cartscreen to see the change. I set the counter to cartBloc.cart.length.toString(). What am I missing and am I using bloc correctly?
Cart Bloc
class CartBloc{
List<ProductModel> cart = [];
double totalCartPrice = 0;
final _cartController = StreamController.broadcast();
Stream get getCartStream => _cartController.stream;
void addToCart(ProductModel product) {
cart.add(product);
totalCartPrice = totalCartPrice + double.parse(product.price);
_cartController.sink.add(cart);
}
void removeFromCart(ProductModel product) {
cart.remove(product);
totalCartPrice = totalCartPrice - double.parse(product.price);
_cartController.sink.add(cart);
}
void dispose() {
_cartController?.close();
}
}
final cartBloc = CartBloc();
Main Screen
class _MainScreenState extends State<MainScreen> {
int _currentIndex = 0;
PageController _pageController;
GlobalKey bottomNavigationKey = GlobalKey();
#override
void initState() {
super.initState();
_pageController = PageController();
}
void dispose(){
super.dispose();
_pageController.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor:Color(0xFF20232A),
appBar: PreferredSize(child: Container(),preferredSize: Size.fromHeight(0.0)),
body: SizedBox.expand(
child: PageView(
physics: NeverScrollableScrollPhysics(),
controller: _pageController,
onPageChanged: (index){
setState(() => _currentIndex = index);
},
children: [
Container(
child: ProductScreen()
),
Container(
child: CartScreen()
),
],
)
),
bottomNavigationBar: Container(
child: BottomNavyBar(
mainAxisAlignment: MainAxisAlignment.center,
containerHeight: 56.0,
backgroundColor: Style.Colors.backgroundColor,
selectedIndex: _currentIndex,
onItemSelected: (index){
setState(() => _currentIndex = index);
_pageController.jumpToPage(index);
},
items:<BottomNavyBarItem>[
BottomNavyBarItem(
textAlign: TextAlign.center,
activeColor: Color(0xFF010101),
title: Text(' PRODUCTS',style: TextStyle(
color:Style.Colors.mainColor,fontSize: 13.0
)),
icon: Padding(
padding: EdgeInsets.only(left:5.0),
child: Icon(
SimpleLineIcons.menu,
size:18.0,
color:_currentIndex == 0 ? Style.Colors.mainColor:Colors.white
),
)
),
BottomNavyBarItem(
textAlign: TextAlign.center,
activeColor: Color(0xFF010101),
title: Text(' CART',style: TextStyle(
color:Style.Colors.mainColor,fontSize: 13.0
)),
icon: Padding(
padding: EdgeInsets.only(left:5.0),
child: Badge(
badgeColor: Style.Colors.mainColor,
badgeContent: Text(cartBloc.cart.length.toString(),style: TextStyle(fontWeight: FontWeight.bold),), //not updating when select item
child: Icon(
SimpleLineIcons.basket,
size:18.0,
color:_currentIndex == 1 ? Style.Colors.mainColor:Colors.white
),
)
)
),
]
),
),
);
}
}

Answer 1

There are a lot of things you're not doing correctly using Bloc.
For example:
Your CartBloc needs to extend the Bloc class like so:
class CartBloc extends Bloc<SomeEvent, SomeState>
Then you need to override the mapEventToState method in that class like this.
#override
Stream<SomeState> mapEventToState(SomeEvent event) async* {
Then you need to provide your Bloc using:
BlocProvider(
create: (_) => CartBloc(),
child: YourWidget()
)
And then use BlocBuilder to build your widget using the data from the CartBloc
I suggest you take a look at the documentation and the example on how to use bloc
https://pub.dev/packages/flutter_bloc/example