Flutter Getx notify all listeners - flutter

Question

I aim using a BottomNavigationBar that contains an icon with a badge that displays the number of products a user have in his shopping cart;
there is only one place to add an product to the cart which i call AddToCartRow :
class AddToCartRow extends StatefulWidget {
final productId;
AddToCartRow(this.productId);
#override
_AddToCartRowState createState() => _AddToCartRowState();
}
class _AddToCartRowState extends State<AddToCartRow> {
TextEditingController _text_controller = TextEditingController();
final CartController cartController = CartController();
int quantity = 1;
#override
void initState() {
super.initState();
_text_controller.text = quantity.toString();
}
void increment() {
setState(() {
quantity += 1;
_text_controller.text = quantity.toString();
});
}
void decrement() {
setState(() {
quantity -= 1;
_text_controller.text = quantity.toString();
});
}
void quantityChanged(val) {
setState(() {
quantity = int.parse(val);
});
}
void addToCart() {
var data = {
"product_id": widget.productId.toString(),
"quantity": quantity.toString(),
};
cartController.addToCart(data);
}
#override
Widget build(BuildContext context) {
return Obx(
() => Padding(
padding: EdgeInsets.all(10),
child: Row(
children: [
// Button
GestureDetector(
child: Container(
height: 50,
width: MediaQuery.of(context).size.width / 2 - 15,
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
decoration: BoxDecoration(
color: CupertinoTheme.of(context).primaryColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"ADD TO CART ",
style: TextStyle(color: CupertinoColors.white),
),
Icon(
CupertinoIcons.bag,
color: CupertinoColors.white,
)
],
),
),
onTap: addToCart),
SizedBox(
width: 10,
child: Padding(
padding: const EdgeInsets.only(left: 15),
child: cartController.modifying.value == true
? CupertinoActivityIndicator()
: Container(),
),
),
// Count
Container(
width: MediaQuery.of(context).size.width / 2 - 15,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
height: 50,
child: Row(
children: [
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: CupertinoColors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4),
bottomLeft: Radius.circular(4),
),
),
width: 50,
height: 50,
child: CupertinoButton(
padding: EdgeInsets.zero,
child: Icon(CupertinoIcons.minus),
onPressed: decrement),
),
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: CupertinoColors.white,
),
alignment: Alignment.center,
child: CupertinoTextField(
controller: _text_controller,
textAlign: TextAlign.center,
onChanged: quantityChanged,
style: TextStyle(
fontSize: 25,
color: CupertinoColors.secondaryLabel),
decoration: BoxDecoration(
borderRadius: BorderRadius.zero,
color: CupertinoColors.white),
)),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: CupertinoColors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(4),
bottomRight: Radius.circular(4),
),
),
width: 50,
height: 50,
child: CupertinoButton(
padding: EdgeInsets.zero,
child: Icon(CupertinoIcons.plus),
onPressed: increment),
)
],
),
),
],
),
)
],
),
),
);
}
}
And there is one place to view the products count (in the cart) in the BottomNavigationBar which is above the AddToCartRow in the widgets tree:
BottomNavigationBarItem(
icon: Obx(
() => Stack(
alignment: Alignment.topRight,
children: [
Icon(CupertinoIcons.bag),
Container(
decoration: BoxDecoration(
color: cartController.loading.value == true
? CupertinoColors.white
: CupertinoTheme.of(context).primaryColor,
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
width: 20,
height: 20,
child: cartController.loading.value == true
? CupertinoActivityIndicator()
: Text(
cartController.cartProductsCont.toString(),
style: TextStyle(
color: CupertinoColors.white,
fontWeight: FontWeight.bold),
),
)
],
),
),
activeIcon: Icon(CupertinoIcons.bag_fill),
label: 'Cart',
),
and the CartControllerClass:
class CartController extends GetxController {
var cartProducts = [].obs;
var cartProductsCont = 0.obs;
var emptyCart = true.obs;
var loading = true.obs;
var modifying = false.obs;
void getCart() async {
var response = await api.getCart();
response = response.data;
if (response["data"].length == 0) {
emptyCart.value = true;
cartProducts.clear();
} else {
emptyCart.value = false;
cartProducts.assignAll(response["data"]["products"]);
cartProductsCont.value = cartProducts.length;
}
loading.value = false;
modifying.value = false;
}
void addToCart(data) async {
loading.value = true;
modifying.value = true;
await api.addProductToCart(data).then((value) => getCart());
}}
in the first time when i call getCart from the widget that holds the BottomNavigatioBar every thing works great, but when i call getCart from AddToCartRow no thing happend , WHY ?

Answer 1

Your State class is not injecting the CartController instance into Get's State Manager using Get.put()
class _AddToCartRowState extends State<AddToCartRow> {
TextEditingController _text_controller = TextEditingController();
final CartController cartController = CartController();
int quantity = 1;
Get.put(CartController())
class _AddToCartRowState extends State<AddToCartRow> {
TextEditingController _text_controller = TextEditingController();
final CartController cartController = Get.put(CartController());
// You're missing a Get.put which Get ↑↑↑↑ needs to track
int quantity = 1;
}