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

Question

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,
);
}
}

Answer 1

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),
),
);
}