Update Cart badge counter in AppBar from multiple widgets - flutter

Question

I am using a Reusable AppBar Widget which has title and action buttons.
In app bar actions, there is favorites icon button and cart icon button with a badge showing the total items in cart :
App Bar widget:
import 'package:badges/badges.dart';
import 'package:flutter/material.dart';
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
final BuildContext context;
final String title;
final bool showBackButton;
final Widget widget;
final bool showActions;
CustomAppBar({
#required this.context,
#required this.title,
this.showBackButton = true,
this.widget,
this.showActions = true,
});
#override
Widget build(BuildContext context) {
return AppBar(
title: Text(title),
leading: showBackButton
? new IconButton(
icon: new Icon(
Icons.arrow_back,
),
onPressed: () {
if (widget != null) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => widget,
),
);
return true;
} else {
Navigator.pop(context);
}
},
)
: null,
actions: !showActions ? null : <Widget>[
IconButton(
icon: const Icon(Icons.favorite_border),
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute<void>(
builder: (BuildContext context) {
return MainHome(
selectedIndex: 1,
);
},
),
);
},
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Badge(
position: BadgePosition.topEnd(top: 3, end: 3),
animationDuration: Duration(milliseconds: 300),
animationType: BadgeAnimationType.slide,
badgeColor: Colors.white,
toAnimate: true,
badgeContent: Text(
'5',
style: TextStyle(
fontSize: 8,
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold),
),
child: IconButton(
icon: const Icon(Icons.shopping_cart_rounded),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute<void>(
builder: (BuildContext context) {
return MainHome(
selectedIndex: 2,
);
},
),
);
},
),
),
),
],
);
}
#override
Size get preferredSize {
return new Size.fromHeight(kToolbarHeight);
}
}
The app bar is used in all screens but with different parameters.
I want to update the counter in app bar whenever user add to cart, update cart, remove from cart. This can happens from multiple pages:
Products list page, product details page, shopping cart page, search suggestions widget. All of these pages have cart actions(add/update/delete).
I don't want to manage this counter in each page. I need a way to manage it in one place and be notified whenever cart updated in order to update badge
I searched a lot. Some uses GLobalKey to manage state but doesn't work in my case as the appbar widget is stateless cannot be stateful.

Answer 1

i suggest that you use any kind of providers like the provider package or riverpod , you need something called notifyListeners , to notify the cart badge every time you add a new item to your cart , otherwise you cart item in your case won't be updated except on widget rebuild ; like navigating and such .
you can check riverpod and provider from pub.dev , make sure to fully understand the docs because it can be tricky !
Hope this answer helps you !

Answer 2

what you want to do is to manage the state of the app. The way you are doing is pretty hard.
Maybe you should look at some state managment solution .
here is a link for a good intro and it talk about what you trying to acheive
intro to state managment
Here is a list of some popular state managment:
Provider (easy to use and recommanded by the Flutter Community)
Bloc (good for very large projects)
GetX (Easy and good to use)
Riverpod (It's provider but more powerful)
There is no a perfect of choice just use what you found good for need.

Answer 3

As suggested by Fahmi Sawalha and Boris Kamtou, I used the provider package to solve the problem.
I will share the code in case anyone needs it. The code helps you create custom AppBar as stateless widget with parameters like title, context, showBackButton, showActions.
And also the code helps you use the provider package to manage state and update ui from different screens.
First Create CartCounterNotifier class at any accessible place in your app. It should extend ChangeNotifier in order to notify listeners when value changed so that ui consuming this provider rebuilds:
CartManager is a Mixin where I manage cart data in DB.
getCartItemsCount() function gets the summation of items' quantities in cart.
cart_counter.dart
import 'package:flutter/material.dart';
class CartCounterNotifier extends ChangeNotifier with CartManager {
int _value = 0;
int get value => _value;
CartCounterNotifier() {
getCartItemsCount().then((counter) {
_value = counter ?? 0;
notifyListeners();
});
}
// You can send send parameters to update method. No need in my case.
// Example: void update(int newvalue) async { ...
void update() async {
int counter = await getCartItemsCount();
_value = counter ?? 0;
notifyListeners();
}
}
The class has two methods:
Constructor to initialize the counter and update() method to be called when value changed.
I have created custom appbar to use across all pages. It is a stateless widget which implements PreferedSizeWidget.
Wrap the widget where you want to show the counter with Consumer. It is better to go deep as possible. In my case, instead of wrapping the whole AppBar with consumer, I just wrapped the text widget showing the counter
custom_app_bar.dart
import 'package:badges/badges.dart'; // add badges to pubspec in order to add badge for icons
import 'package:flutter/material.dart';
import 'package:order_flutter_package/services/cart_counter.dart';
import 'package:order_flutter_package/ui/views/home_view/home_view.dart';
import 'package:provider/provider.dart';
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
final BuildContext context;
final String title;
final bool showBackButton;
final Widget widget;
final bool showActions;
CustomAppBar({
#required this.context,
#required this.title,
this.showBackButton = true,
this.widget,
this.showActions = true,
});
#override
Widget build(BuildContext context) {
return PreferredSize(
preferredSize: Size.fromHeight(50),
child: AppBar(
title: Text(title),
leading: showBackButton
? new IconButton(
icon: new Icon(
Icons.arrow_back,
),
onPressed: () {
if (widget != null) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => widget,
),
);
return true;
} else {
Navigator.pop(context);
}
},
)
: null,
actions: !showActions
? null
: <Widget>[
IconButton(
icon: const Icon(Icons.favorite_border),
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute<void>(
builder: (BuildContext context) {
return MainHome(
selectedIndex: 1,
);
},
),
);
},
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Badge(
position: BadgePosition.topEnd(top: 3, end: 3),
animationDuration: Duration(milliseconds: 300),
animationType: BadgeAnimationType.slide,
badgeColor: Colors.white,
toAnimate: true,
badgeContent: Consumer<CartCounterNotifier>(
builder: (context, cartCounter, child) {
return Text(
cartCounter.value.toString(),
style: TextStyle(
fontSize: 8,
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold),
);
}),
child: IconButton(
icon: const Icon(Icons.shopping_cart_rounded),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute<void>(
builder: (BuildContext context) {
return MainHome(
selectedIndex: 2,
);
},
),
);
},
),
),
),
],
),
);
}
#override
Size get preferredSize {
return new Size.fromHeight(kToolbarHeight);
}
}
Then wrap your main.dart app with ChangeNotifierProvider
import 'package:provider/provider.dart';
import 'package:order_flutter_package/services/cart_counter.dart';
ChangeNotifierProvider(
create: (context) => CartCounterNotifier(),
child: MyApp(),
)
Finally, in order to update counter, in any screen,
// Very important to import provider else you got an error
import 'package:provider/provider.dart';
// On button pressed or any event
var cartCounter = context.read<CartCounterNotifier>();
cartCounter.update();