我想在此Flutter博客应用中添加一个喜欢的按钮

问题描述 投票:0回答:1

该项目可以在这里找到:https://github.com/Santos-Enoque/flutter_blog_app

到目前为止,我已将此连接到Firebase实时数据库,并且运行良好。我正在尝试在首页(lib / screens / home.dart)中添加一个喜欢的按钮,列出所有帖子。

主页使用带有ListTile的卡片显示博客结果。 ListTile卡的拖尾属性已被使用,因此我想使用ListTile卡的前导属性来显示收藏夹图标,该图标在点击时会增加counter ++,并将结果保存到Firebase。就像Facebook的“赞”按钮一样。这是下面的代码:

                   child: Card(
                            child: ListTile(
                              title: ListTile(
                                onTap: (){
                                  Navigator.push(context, MaterialPageRoute(builder: (context) => PostView(postsList[index])));
                                },
                                title: Text(
                                  postsList[index].title,
                                  style: TextStyle(
                                      fontSize: 22.0, fontWeight: FontWeight.bold),
                                ),
                                trailing: Text(
                                  timeago.format(DateTime.fromMillisecondsSinceEpoch(postsList[index].date)),
                                  style: TextStyle(fontSize: 14.0, color: Colors.grey),
                                ),
                              ),
                              subtitle: Padding(
                                padding: const EdgeInsets.only(bottom: 14.0),
                                child: Text(postsList[index].body, style: TextStyle(fontSize: 18.0),),
                              ),
                            ),
                          ),
                        );
                      })),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => AddPost()));
        },
        child: Icon(
          Icons.edit,
          color: Colors.white,
        ),
        backgroundColor: Colors.red,
        tooltip: "add a post",
      ),
    );
  }

   _childAdded(Event event) {
    setState(() {
      postsList.add(Post.fromSnapshot(event.snapshot));
    });
  }

  void _childRemoves(Event event) {
    var deletedPost = postsList.singleWhere((post){
      return post.key == event.snapshot.key;
    });

    setState(() {
      postsList.removeAt(postsList.indexOf(deletedPost));
    });
  }

  void _childChanged(Event event) {
    var changedPost = postsList.singleWhere((post){
      return post.key == event.snapshot.key;
    });

    setState(() {
      postsList[postsList.indexOf(changedPost)] = Post.fromSnapshot(event.snapshot);
    });
  }
}

![博客首页] https://photos.google.com/share/AF1QipMK6C-Wx2vZHHbE2jDMQsfYNnwl9OWK_5W8OKOfiIChcXt-gnWnCH7ba_EpyRnRAA?key=cGxkRkVSSk9PQTdtTXB0MzZBRDNHNUVzSGxlcDVB

博客帖子显示为卡片,如图中所示。我试图在卡片左侧(前导)添加一个图标,并在每次有人点击该图标时添加一个递增值。类似于Facebook上的“赞”按钮。并将数据保存到Firebase实时数据库。

非常感谢任何帮助...谢谢大家!

flutter firebase-realtime-database flutter-layout
1个回答
0
投票

我想您可能想做的就是将此功能添加到您的印上。您还需要将图标旁边的文本设置为等于读取的新值。 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); } } 希望这会有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.