Detailed explanation of the advanced usage of listview in Flutter

Introduction

Generally speaking, the way we use Listview is to build the items to be displayed, and then pass these items into the constructor of ListView. Usually this is enough, but it is not ruled out that we have some other special needs.

Today we will explain some advanced usages of ListView.

General usage of ListView

The general usage of ListView is to directly use the constructor of ListView to construct each item in the ListView.

The ListView has a children attribute, which receives a widget list, which is the object to be rendered in the ListView.

Let's construct a ListView object with 100 items:

class CommonListViewApp extends StatelessWidget{
  const CommonListViewApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: List&lt;Widget&gt;.generate(100, (i) =&gt; Text('List $i')),
    );
  }
}

In the example above, we generated 100 objects with a simple method.

There is no problem when the number of items is relatively small. If the number of items is relatively large, it is not realistic to directly take out all items and put them in ListView.

Fortunately, ListView also provides a method, which will create items as needed, so it is very useful when there are a large number of items.

As for the example above, this time we will generate 10,000 item objects and then place these objects in ListView. How should we deal with it?

Because we want to use builder this time, there is no need to create a widget when the item is generated. We can place the creation of the widget in the builder of the ListView.

First, we build an items list and pass it into the StatelessWidget of MyApp:

    MyApp(
      items: List&lt;String&gt;.generate(10000, (i) =&gt; 'List $i'),
    )

Then you can use it in MyApp body to build the item:

body: (
          itemCount: ,
          prototypeItem: ListTile(
            title: Text(),
          ),
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        )

It is recommended to create a ListView. The complete code above is as follows:

import 'package:flutter/';

void main() {
  runApp(
    MyApp(
      items: List&lt;String&gt;.generate(10000, (i) =&gt; 'List $i'),
    ),
  );
}

class MyApp extends StatelessWidget {
  final List&lt;String&gt; items;

  const MyApp({Key? key, required }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'Usage of ListView';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: (
          itemCount: ,
          prototypeItem: ListTile(
            title: Text(),
          ),
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

Create different types of items

After seeing this, some students may ask, is it possible to create one item type in ListView? The answer is of course no.

Whether it is built from the constructor of the ListView or from the constructor, we can freely create different types of items.

Of course, the best way is to use it, create different items according to the index passed in.

As for the above example, when we create the items array, we can generate different item types according to the different i. You can also see below, and return different items in the itemBuilder according to the different index:

body: (
          itemCount: ,
          prototypeItem: ListTile(
            title: Text(),
          ),
          itemBuilder: (context, index) {
            if(index %2 == 0) {
              return ListTile(
                title: Text(items[index]),
              );
            }else{
              return Text(items[index]);
            }
          },
        )

Very convenient.

The complete code for creating different items is as follows:

import 'package:flutter/';

void main() {
  runApp(
    MyApp(
      items: List&lt;String&gt;.generate(10000, (i) =&gt; 'List $i'),
    ),
  );
}

class MyApp extends StatelessWidget {
  final List&lt;String&gt; items;

  const MyApp({Key? key, required }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'Usage of ListView';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: (
          itemCount: ,
          prototypeItem: ListTile(
            title: Text(),
          ),
          itemBuilder: (context, index) {
            if(index %2 == 0) {
              return ListTile(
                title: Text(items[index]),
              );
            }else{
              return Text(items[index]);
            }
          },
        ),
      ),
    );
  }
}

Summarize

ListView is a widget that we often use in our applications. I hope everyone can master it flexibly.

Examples of this article:/ddean2009/

This is the end of this article about explaining the advanced usage of listview in Flutter. For more related Flutter listview content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!