Should I use a Table or ListView for a large list of objects in Flutter?

Question

I have a list (say 100) of Widgets I want to display on a screen; the screen can fit about 10 items. In terms of efficiency of painting, should I be using a ListView.builder, or a Table with a SingleChildScrollView? Or something else?

The ListView would look something like this (sorta pseudo-coded):

return new Column(
  children: <Widget>[
    new Container(
      height: 30.0,
      child: new Row(
        children: <Widget>[
          utils.createLabelText('Name'),
          utils.createLabelText('Owner'),
          utils.createLabelText('Last Modified'),
        ],
      ),
    ),
    new Expanded(
      child: new ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          doc_fidl.Document doc = model.documents[index];
          return new ListItem(
            doc: doc,
          );
        },
      ),
    ),
  ],
);

while the Table would look like this:

List<TableRow> rows = <TableRow>[
  new TableRow(
    children: <Widget>[
      utils.createLabelText('Name'),
      utils.createLabelText('Owner'),
      utils.createLabelText('Last Modified'),
    ],
  ),
];
for (Document doc in documents) {
  rows.add(
    new TableRow(
        doc: doc.widgetList,
    ),
  );
}

return new SingleChildScrollView(child: new Table(children: rows));

It seems like the ListView.builder would be most efficient since it builds the children on demand. However, the Table seems more appropriate for this task (since it can easily align the 3 columns correctly, regardless of each column's text length, especially between the header row and the content rows).

Ulberto

Answer 1

I ended up using the a ListView.builder just because I want to ensure that each row would be efficient.

I solved the even-cell-width-layout of each Row by putting each Row's widgets in Expandeds, and giving each Expanded a flex property.

Ulberto

You should accept your own answer, if that's the one you went with. – Elsa

Answer 2

The ListView supports lazy loading which is a must for big amounts of data because only the data visible on the screen is loaded with the ListView.builder and the construction based on the index.

In your second example all the Rows of the Table getting constructed therefore I would say the first example is way more efficient. That might be not crucial for just 100 items.

Sheba

Right. I suppose the real question is, at what point is a ListView significantly more efficient? 100 items? 1000? more? – Ulberto

I would not make the evaluation and be always on the save site and use the builder – Sheba

Answer 3

I use this JSON Package for long list. It is good looking and responsive.

here you can get this package

If you don't like this package then you can use listview.This is good for a long list of data. If you want a smooth app [without crash] then listview is preferrable.

Zeringue