How to create facebook like comment structure in flutter? - flutter

Question

I am trying to construct comment section in a project I am working on. And I want it the way facebook have done it. I have taken care of almost everything right now but how can I populate a field right below the original comment and create another comment field which will be typed when pressed reply?
Please have a look at the code and help me with this.
class MyHomePageState extends State<MyHomePage> {
Widget postComment(String time, String postComment, String profileName,
String profileImage, int likeCount) {
return Padding(
padding: EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
CircleAvatar(maxRadius: 16, child: Image.asset(profileImage)),
SizedBox(
width: 16.0,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
color: Hexcolor('#E9F1FE'),
borderRadius: BorderRadius.circular(6.0),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
profileName,
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
postComment,
style: TextStyle(fontSize: 16.0),
)
],
),
),
),
SizedBox(
height: 12.0,
),
Row(
children: [
Text(time, style: TextStyle(fontWeight: FontWeight.w600)),
SizedBox(
width: MediaQuery.of(context).size.width * 0.1,
),
Text('Like', style: TextStyle(fontWeight: FontWeight.w600)),
SizedBox(
width: MediaQuery.of(context).size.width * 0.1,
),
InkWell(
onTap: () {},
child: Text(
'Reply',
style: TextStyle(fontWeight: FontWeight.w600),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.24,
),
InkWell(
onTap: () {
// _incrementCommentLikeCount();
},
child: Text('$likeCount')),
SizedBox(
width: MediaQuery.of(context).size.width * 0.02,
),
SvgPicture.asset('assets/like.svg')
],
)
],
)
],
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
///Just calling the widget for sake of example
postComment(
'2h', 'This is a comment', 'Unknown Name', 'assets/img1.png', 10)
],
));
}
}
Here is the output:

Answer 1

If you're looking for ways on how you can update a ListView, you can populate the ListView with a List of Objects i.e. List<Comment> _comments;.
As an example, you can create a Comment model
class Comment {
String commentId;
String userId;
String comment;
Timestamp timestamp;
Comment(
{required this.id,
required this.sender,
required this.comment,
required this.timestamp});
...
Then use the List to populate ListView.builder with data.
ListView.builder(
itemCount: _comments.length,
itemBuilder: (BuildContext context, int index) {
// Return a Widget for the comments
return Container(...);
}
)
You can then access Comment objects inside List<Comment> using the index provided by ListView.builder()
i.e. Text('${_comments[index].comment}')
To add new comments on the List, you can just add new Comment objects on the List.
_comments.add(Comment(
commentId: generatedCommentId,
userId: senderUserId,
comment: senderMessage,
timestamp: DateTime.now(),
));