Shopping Cart Counter not updating value when pressed, no Error is shown for the matter

Issue

I have a small code for a shopping cart counter in my app, when running the app it does not update upon pressing the add or remove button (+ & – icons), although I assigned the functions for both of them, no errors are shown as to why this is happening…

This is the code for the counter:

    import 'package:flutter/material.dart';

class CartCounter extends StatefulWidget {
  @override
  _CartCounterState createState() => _CartCounterState();
}

class _CartCounterState extends State<CartCounter> {
  int numOfItems = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        buildOutlineButton(
          icon: Icons.remove,
          press: () {
            if (numOfItems > 0) {
              setState(() {
                numOfItems--;
              });
            }
          },
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: kDefaultPaddin / 2),
          child: Text(
            // if our item is less  then 10 then  it shows 01 02 like that
            numOfItems.toString().padLeft(2, "0"),
            style: Theme.of(context).textTheme.headline6,
          ),
        ),
        buildOutlineButton(
            icon: Icons.add,
            press: () {
              if (numOfItems < 10) {
                setState(() {
                  numOfItems++;
                });
              }
            }),
      ],
    );
  }

  SizedBox buildOutlineButton(
      {required IconData icon, required Function press}) {
    return SizedBox(
      width: 40,
      height: 32,
      child: OutlinedButton(
        style: OutlinedButton.styleFrom(
          padding: EdgeInsets.zero,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(13.0)),
        ),
        onPressed: press(),
        child: Icon(icon),
      ),
    );
  }
}

And this is the code where I call the Cart Counter class, it also has a rating bar that works perfectly fine:

    class CounterWithRateBar extends StatefulWidget {
  @override
  _CounterWithRateBarState createState() => _CounterWithRateBarState();
}

class _CounterWithRateBarState extends State<CounterWithRateBar> {
  // const CounterWithRateBar({
  //   Key? key,
  // }) : super(key: key);
  late double _rating;
  int _ratingBarMode = 1;
  double _initialRating = 2.0;
  IconData? _selectedIcon;

  @override
  void initState() {
    super.initState();
    _rating = _initialRating;
  }
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        CartCounter(),
        Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children:
            <Widget>[
              SizedBox(
                height: 10.0,
              ),
              _ratingBar(_ratingBarMode),
              SizedBox(height: 5.0),
              Text(
                'Rating: $_rating',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ]
        ),
      ],
    );
  }

  Widget _ratingBar(int mode) {
    return RatingBar.builder(
      initialRating: _initialRating,
      minRating: 1,
      direction: Axis.horizontal,
      allowHalfRating: true,
      unratedColor: Colors.amber.withAlpha(50),
      itemCount: 5,
      itemSize: 25.0,
      itemPadding: EdgeInsets.symmetric(horizontal: 2.0),
      itemBuilder: (context, _) => Icon(
        _selectedIcon ?? Icons.star,
        color: Colors.amber,
      ),
      onRatingUpdate: (rating) {
        setState(() {
          _rating = rating;
        });
      },
      updateOnDrag: true,
    );
  }
}

Solution

You have small mistake in buildOutlineButtonDefinition

You immediately calling press function and not using is as callback;

From

onPressed: press(),

To

onPressed: () => press(),

Full definition would be

SizedBox buildOutlineButton(
      {required IconData icon, required Function press}) {
    return SizedBox(
      width: 40,
      height: 32,
      child: OutlinedButton(
        style: OutlinedButton.styleFrom(
          padding: EdgeInsets.zero,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(13.0)),
        ),
        onPressed: () => press(),
        child: Icon(icon),
      ),
    );
  }

Answered By – Dominik Šimoník

Answer Checked By – Robin (FlutterFixes Admin)