Optimizing ListView in Flutter

ListView with children

The simplest way to create a scrollable ListView in Flutter is by building a list of child widgets and setting the children parameter:

return ListView(
     children: this.wikis.map((wiki) {
          return Text(wiki.displayName);
     }).toList(),
 );

This is fine for small lists, but with a larger data set you will quickly run into memory constraints. This is where the builder comes in...

ListView Builder

With ListView.builder() you only load what is visible (much like UITableViews on iOS).

ListView.builder(
    itemCount: this.wikis.length,
    itemBuilder: (ctx, index) {
        return Text(this.wikis[index].displayName);
    },
),

ListView sizing

ListView needs to be placed within a widget that has a set height (or width if vertical scrolling). Unfortunately widgets like Column do not have a set height, so it is preferred to wrap it in a Container like so:

Container(
  height: 300,
  child: ListView.builder(...)
);