fluttericonsfavorites

Icon not changing after pressing it - Flutter


I working creating a favorite page. For each Product Page, I place on app bar a favorite icon that suppose to change and add the specific product to the favorites of the user.

I am failing to change the state of the icon after pressing it.

class FoodDetail extends StatefulWidget {
  @override
  _FoodDetail createState()=> _FoodDetail();

  const FoodDetail({Key key}) : super(key: key);

}
  
  class _FoodDetail extends State<FoodDetail>{

  @override
  Widget build(BuildContext context) {
    FoodNotifier foodNotifier = Provider.of<FoodNotifier>(context);

    _onFoodDeleted(Food food) {
      Navigator.pop(context);
      foodNotifier.deleteFood(food);
    }
  final _saved = Set<BuildContext>();
  final alreadySaved = _saved.contains(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(foodNotifier.currentFood.name),
        actions: <Widget>[
          // action button
                    new IconButton(
                    icon: alreadySaved ? Icon(Icons.star) : Icon(Icons.star_border),
                    color: alreadySaved ? Colors.yellow[500] : null,
                    onPressed: (){
                      setState(() {
                      if (alreadySaved) {
                        _saved.remove(context);
                        } else {
                        _saved.add(context); 
                        }
                      });}

Solution

  • Your states doesn't change because you're putting them inside the build method which always reinitialize them.

    Put your states _saved, alreadySaved outside the build method.

      final _saved = Set<BuildContext>();
      final alreadySaved = _saved.contains(context);
    
      @override
      Widget build(BuildContext context) {
    
      }