provider won't show the value on it's own

Question

I made a provider to get sum up values of multiples instances of class Food and display the sum on a button but for some reason it doesn't show unless I leave and return to the page or hot reload. Please help I'm losing my mind.

I have a list userOrders that contains all items added to the cart and the fold function is supposed to sum up the product of the price and quantity and display it on the button.

Food

class Food {
  String imgUrl;
  String desc;
  String name;
  String waitTime;
  num score;
  int price;
  int pq;
  int quantity;
  bool favourited;
  List<Map<String, String>> ingredients;
  String about;
  bool highlight;
  Food(this.imgUrl, this.desc, this.name, this.pq, this.waitTime, this.score,
      this.price, this.quantity, this.ingredients, this.about, this.favourited,
      {this.highlight = false});

  int pqProduct(Food food) {
    pq = food.quantity * food.price;
    return pq;
  }

Provider

class FavFood with ChangeNotifier {
  int peeQee() {
    int pqe =
        userOrders.fold(0, (a, element) => a + element.pqProduct(element));
    return pqe;
  }

  void update() {
    notifyListeners();
  }
}

Button

class NextButton extends StatefulWidget {
  @override
  State<NextButton> createState() => _NextButtonState();
}

class _NextButtonState extends State<NextButton> {
  @override
  Widget build(BuildContext context) {
    return userOrders.isNotEmpty
        ? Container(
            color: Colors.transparent,
            padding: const EdgeInsets.fromLTRB(10.0, 10.0, 5.0, 5.0),
            height: 60,
            width: double.infinity,
            child: ElevatedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18.0),
                    side: const BorderSide(color: Colors.transparent),
                  ),
                ),
              ),
              child: Text(
                '${context.read<FavFood>().peeQee}',
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0,
                ),
              ),
              onPressed: () {},
            ),
          )
        : const Text('');
  }
}

The button is supposed to update the price when an item is added but it doesn't until I reload

Instance of Food

Food(
        'assets/images/sha-modified.png',
        'Most Recommended',
        'Shawarma',
        0,
        '15 min',
        4.5,
        1500,
        0,
        [
          {
            'Flatbread': 'assets/images/flatbread-modified.png',
          },
          {'Cabbage': 'assets/images/cabbb-modified.png'},
          {'Chicken': 'assets/images/chicken-modified.png'},
          {'Sauce': 'assets/images/sauce-modified.png'},
        ],
        'A sandwich of sliced lamb or chicken, vegetables, and often tahini wrapped in pita bread',
        highlight: true,
        false,
      ),

Answer 1

You need to place a context.watch<FavFood>() within your build method to actually listen to the changes by notifyListeners().

Also your onPressed callback is actually empty, you need to call your update() method to trigger the build.