Clash Royale CLAN TAG

How to add the widgets dynamically to column in Flutter?

I have added a few widgets inside the ListView. So that I can scroll all widgets. Now I required to add one more widget to the ListView to load the list of comments. I can not add the ListView inside the ListView. And moreover, I do not require the separate scroll for my comments. It should be scroll along with the widgets inside the ListView. So I planned to add the Column instead of ListView. Could any help to add my comments dynamically in the Columns?

ListView

ListView

ListView

ListView

ListView

Column

ListView

Columns

new Expanded(
child:
new ListView(
shrinkWrap: true,
children: <Widget>[

// Title

new Padding(padding: const EdgeInsets.only(
top: 10.00, left: 10.00),
child: new Text(
_feed.title, textAlign: TextAlign.start,),
),

// content

new Container(
child: new Text(
_feed.content, textAlign: TextAlign.start,),
),

// Comments List will go here

],
),
),


1 Answer
1

If you have the comments data already, simply created a List, then pass it to the children property of the Column. Something like:

children

Column

var commentWidgets = List<Widget>();
for (var comment in comments) {
commentWidgets.Add(Text(comment.text)); // TODO: Whatever layout you need for each widget.
}
…

new Expanded(
child:
new ListView(
shrinkWrap: true,
children: <Widget>[

// Title

new Padding(padding: const EdgeInsets.only(
top: 10.00, left: 10.00),
child: new Text(
_feed.title, textAlign: TextAlign.start,),
),

// content

new Container(
child: new Text(
_feed.content, textAlign: TextAlign.start,),
),

// Comments List will go here
Column(children: commentWidgets,),
],
),
),


If you don't have the comments data already and need to fetch it, use a FutureBuilder to build the UI once the future completes.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.