J L
J L

Reputation: 755

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

Upvotes: 0

Views: 697

Answers (1)

MJ Montes
MJ Montes

Reputation: 3376

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) {

  }

Upvotes: 1

Related Questions