Widget structure for comments with subcomments

Hi guys,

I am currently building an app where I want people to not only write comments to a searchrequest but also comment on comments (which should create subcomments) and then being able to comment on the subcomments again.

My firestore "comments" collection is a subcollection of the "searchrequest" collection and each document has a field "parent_document" that is a reference to the comments subcollection itself.

To make things clear, I dont want an unlimited tree depth of the "comment->subcomment"-tree but just a tree of max. depth 2.
So when replying to a subcomment even tho it will be stored as one more tree depth in firestore it should not be displayed like this in the frontend.
So I think it should be rather simple.

Currently what I have done to display the comments is just querying the comments collection on the top of the card where I want to display the comments, then generating dynamic children on Listview 1, where one of the dynamic children widgets is another Listview 2 that than again dynamically displays all the subcomments for each top-level comment.

Everything gets displayed properly but the problem occurs when I want to add a textfield to reply to a top-comment and another textfield to reply to a subcomment.

As soon as I add the textfield and apply the "create comment document on submit"-logic, the following error message gets displayed:

"widget with the current configuration will not function properly when generated dynamically at the moment (because it is associated with a local state variable). Consider wrapping it inside of a component and then generate the component dynamically."

So I did what was recommended here https://community.flutterflow.io/widgets-and-design/post/can-anyone-help-me-with-this-error-dQ4dSs1EwsClFTI and converted the first listview that generates the dynamic top-level comment children into a component. The error still occured so I converted the second listview that generates the dynamic subcomment children into another component. By doing this the error still did not get resolved.

Since this comment/subcomment like structure is a rather common feature of any social media app, I suppose that my widget structure approach with the two listviews is just not the right approach.

Any tips on how to make this work properly would be highly appreciated 🙂

P.S.: I have attached a screenshot of the current working widget without the two "reply to comment" textfields. I guess you can imagine where they would be placed based on common sense ;)