Best Way To Use Flutter ListView Long List

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

ListView is a very important widget in a flutter. It is used to create a list of children But when we want to create a list recursively without writing code again and again then ListView. builder is used instead of ListView. ListView. the builder creates a scrollable, linear array of widgets.

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

Working with a Flutter ListView 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:

Creating Long ListView

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

Creating Data Source

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-

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.

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-

Flutter Infinite ListView

ListView with items that can be scrolled infinitely in both directions.

Replace your existing ListView with InfiniteListView. Builder pattern must be used because of its infinite nature.

Run this command:

With Flutter:

 $ flutter pub add infinite_listview

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  infinite_listview: ^1.1.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

This is the end of our Flutter ListView Long List tutorial article. If you want to add a custom icon or custom font to the project read our other tutorials.

How to add a ListView to a Column in Flutter?

Column(
    children: <Widget>[
      Text('Leading text widget'),
      ListView(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.map),
            title: Text('Map'),
          ),
          ListTile(
            leading: Icon(Icons.photo_album),
            title: Text('Album'),
          ),
          ListTile(
            leading: Icon(Icons.phone),
            title: Text('Phone'),
          ),
        ],
      ),
      Text('More widget'),
    ],
  );

Add this two line of code

shrinkWrap: true,

physics: NeverScrollableScrollPhysics(),

In ListView.Builder you can wrap the listview widget with Expanded widget or Flexible widget and limit the itemCount value.

Horizontal ListView inside a Vertical ScrollView in Flutter

body: SingleChildScrollView(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Text(
        'Headline',
        style: TextStyle(fontSize: 18),
      ),
      SizedBox(
        height: 200.0,
        child: ListView.builder(
          physics: ClampingScrollPhysics(),
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: 15,
          itemBuilder: (BuildContext context, int index) => Card(
                child: Center(child: Text('Dummy Card Text')),
              ),
        ),
      ),
      Text(
        'Demo Headline 2',
        style: TextStyle(fontSize: 18),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
    ],
  ),
),

Happy Coding! 🙂