Переключить кнопку «Мне нравится» в flutter

#firebase #flutter #dart

#firebase #flutter #dart

Вопрос:

У меня есть приложение для показа продуктов, у меня есть класс модели для преобразования данных в Json

 class TvShow {
  String id;
  String name;
  String image;
  String des;
  String date;
  List<Content> content;
  bool isLiked = false;

  TvShow({this.id,
    this.name,
    this.content,
    this.image,
    this.des,
    this.date,
    this.isLiked});

  void toggleIsLiked() {
    isLiked = !isLiked;
  }
  

все данные получены из базы данных Firebase, за исключением (нравится) Я хочу разобраться с этим локально

Я использую пакет поставщика

 List<TvShow> _favourites = [];
void addFavorite(TvShow tvShow) {
_favourites.add(tvShow);
notifyListeners();
}

 void removeFavorite(TvShow tvShow) {
_favourites.remove(tvShow);
notifyListeners();
  }

 void toggleLikeButton(TvShow tvShow) {
tvShow.toggleIsLiked();
notifyListeners();
 }

int get count {
return _favourites.length;
}

List<TvShow> get favoriteList {
return _favourites;
}
  

это код кнопки like

         Padding(
      padding: const EdgeInsets.only(bottom: 20.0),
      child: Align(
        alignment: Alignment.topRight,
        child: IconButton(
            onPressed: () {
              cardDataProvider.toggleLikeButton(tvShow);
              tvShow.isLiked == true
                  ? cardDataProvider.addFavorite(tvShow)
                  : cardDataProvider.removeFavorite(tvShow);
            },
            icon: tvShow.isLiked == true
                ? Icon(
                    Icons.favorite,
                    color: Colors.red,
                  )
                : Icon(
                    Icons.favorite_border,
                    color: Colors.white,
                  )),
      ),
    ),
  

Затем я отображаю список избранных на экране избранного

Проблема в том, что когда я нажимаю кнопку «Мне нравится», она ненадолго превращается в красное сердце, а затем снова превращается в пустое сердце.

введите описание изображения здесь

Есть ли решение для этого или лучший способ реализовать эту идею, также я хочу показать состояние кнопки «Мне нравится» на другом экране.

Спасибо.

Комментарии:

1. когда вы что-то изменяете, вы должны использовать метод setState{}, изменение должно быть установлено внутри setState{}

Ответ №1:

это должно сделать это: оберните вашу функцию с помощью setState((){}) точно так же, как это :

 setState((){


cardDataProvider.toggleLikeButton(tvShow);
          tvShow.isLiked == true
              ? cardDataProvider.addFavorite(tvShow)
              : cardDataProvider.removeFavorite(tvShow);
});