该项目可以在这里找到: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);
});
}
}
博客帖子显示为卡片,如图中所示。我试图在卡片左侧(前导)添加一个图标,并在每次有人点击该图标时添加一个递增值。类似于Facebook上的“赞”按钮。并将数据保存到Firebase实时数据库。
非常感谢任何帮助...谢谢大家!
我想您可能想做的就是将此功能添加到您的印上。您还需要将图标旁边的文本设置为等于读取的新值。
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);
}
}
希望这会有所帮助。