Я хотел бы добавить кнопку «Мне нравится» в это приложение для блога - PullRequest
Новая
       3

Я хотел бы добавить кнопку «Мне нравится» в это приложение для блога

0 голосов
/ 05 марта 2020

Этот проект можно найти здесь: https://github.com/Santos-Enoque/flutter_blog_app

До сих пор я подключен к базе данных реального времени firebase и работает хорошо. Я пытаюсь добавить кнопку «Мне нравится» на домашнюю страницу (lib /screen / home.dart), где перечислены все сообщения.

На домашней странице отображаются результаты блога с использованием карты с ListTile. Конечное свойство карты ListTile уже используется, поэтому я хотел бы использовать ведущее свойство карты ListTile для отображения избранного значка, который будет увеличивать счетчик ++ при нажатии, а также сохранять результаты в Firebase. Прямо как кнопка «Мне нравится» в Facebook. Вот код ниже: 

                          child: Card(
                            child: ListTile(
                              title: ListTile(
                                onTap: (){
                                  _incrementCounter();                                
                                },

                                leading: FittedBox(
                                  fit: BoxFit.fitWidth,
                                  child: Row(
                                    children: <Widget>[
                                      Icon(Icons.favorite),
                                      Text(postsList[index].counter.toString()
                                      ),
                                    ],
                                  ),
                                  ),

                                title: Text(
                                  postsList[index].title,
                                  style: TextStyle(
                                      fontSize: 16.0, fontWeight: FontWeight.bold),
                                ),
                                trailing: Text(
                                  timeago.format(DateTime.fromMillisecondsSinceEpoch(postsList[index].date)),
                                  style: TextStyle(fontSize: 12.0, color: Colors.grey),
                                ),

                              ),
                              subtitle: Padding(
                                padding: const EdgeInsets.only(bottom: 14.0),
                                child: Text(postsList[index].body, style: TextStyle(fontSize: 14.0),),
                              ),
                            ),
                          ),

Вот код счетчика _increment: 

    try {
      var ref = FirebaseDatabase.instance.reference().child('posts/{postId}/counter');
      await ref.once().then((data) async => {
        await ref.set(data.value + 1),

      });
    } catch (e) {
      print(e.message);
    }
  }

! [Домашняя страница блога] https://photos.google.com/share/AF1QipMK6C-Wx2vZHHbE2jDMQsfYNnwl9OWK_5W8OKOfiIChcXt-gnWnCH7ba_EpyRnRAA?key=cGxkRkVSSk9PQTdtTXB0MzZBRDNHNUVzSGxlcDVB

Сообщения в блоге отображаются в виде карточек, как на картинке ... Я пытаюсь добавить значок с левой стороны карточки (начальный) плюс увеличивающееся значение каждый раз, когда кто-то нажимает на значок. Что-то вроде кнопки «Нравится» на Facebook. А также сохраните данные в базе данных реального времени Firebase.

Любая помощь очень ценится ... Спасибо всем!

Ответы [ 2 ]

1 голос
/ 06 марта 2020

Я думаю, что вы можете захотеть сделать, это добавить эту функцию в свой onPressed. Вам также нужно будет установить текст рядом с иконкой равным новому прочитанному значению. 

void like() async {
    try {
      var ref = FirebaseDatabase.instance.reference().child('path to likes for a post');
      await ref.once().then((data) async => {
        await ref.set(data.value + 1);
      });
    } catch (e) {
      print(e.message);
    }
  }

Надеюсь, это поможет.

PS - Вы можете найти это видео об использовании: https://www.youtube.com/watch?v=l8_7RTRRmHo

0 голосов
/ 11 марта 2020

Спасибо всем, кто помог с этим:

Код для пользовательского интерфейса: 

leading: FittedBox(
          fit: BoxFit.fitWidth,
           child: Row(
            children: <Widget>[
            Icon(Icons.favorite),
            Text(postsList[index].counter.toString()
                  ),
                 ],
                ),
            ),

Код для функции: 

onTap: (){
     _incrementCounter(postsList[index].key);
}
...

void _incrementCounter(key) async {
    try {
      var ref = FirebaseDatabase.instance.reference().child('posts/'+ key +'/counter');
      await ref.once().then((data) async => {
        await ref.set(data.value + 1),
      });
    } catch (e) {
      print(e.message);
    }
  }
}
...