Working with long list in flutter

In the previous post, We have learnt simple way of creating static listview. But, If the number of  items in the list is long and dynamically generated, then simple listview will not work. So, In this post, we are going to see the implementation of long listview in flutter.

At the end of this post, We will be able to see our app as shown in the screenshot below:

working with long list
Working with long list

Now, let’s start our tutorial by creating a brand new flutter project in Android Studio by navigating to File => New => New Flutter Project

Now remove all the default code, and write the following main() function from scratch-

import 'package:flutter/material.dart';

void main() => runApp(WorkingWithLongList());

class WorkingWithLongList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Working with Long List",
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Long List")),
        body: getListView(),
      ),
    );
  }
}

Creating Long ListView

In order to create long and dynamic listview, we will have to follow these easy two steps:

  1. Creating Data Source
  2. Converting the Data Source into widgets

Creating Data Source

Here, Data Source will act as a source of data  that will populate your listview. Either it can be a  database source or dynamically (programmatically generated) data sets. It can also be a file source such as json file etc.

In this tutorial, we will be dynamically generating lists of 500 items as shown below-

//Creating Data Source for long list
List<String> dataSource() {
  var items = List<String>.generate(500, (i) => "Item $i");
  return items;
}

Converting the data source into widgets

Now, after creating data source, it’s important to convert our each item as a widget so that we can use them as a child of our listview.

//Converting the dataSources as a widget
Widget getListView() {
  var allItems = dataSource();
  var listView = ListView.builder(
      itemCount: allItems.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(allItems[index])
        );
      });

  return listView;
}

In the above code, we are using ListView.builder() which expects context and index (position of list item) as a parameter. And we are returning each item as ListTile widget.

Now, after combining all the above code, our main.dart file will have the following code-

import 'package:flutter/material.dart';

void main() => runApp(WorkingWithLongList());

class WorkingWithLongList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Working with Long List",
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Long List")),
        body: getListView(),
      ),
    );
  }
}

//Creating Data Source for long list
List<String> dataSource() {
  var items = List<String>.generate(500, (i) => "Item $i");
  return items;
}

//Converting the dataSources as a widget
Widget getListView() {
  var allItems = dataSource();
  var listView = ListView.builder(
      itemCount: allItems.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(allItems[index])
        );
      });

  return listView;
}

Happy Coding! 🙂