How to create facebook like comment structure in 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(),
));