Flutter ListView Long List Memory Efficient Dynamic | Flutter Dart Tutorial

This Flutter Dart tutorial, Learn How to build an application with memory efficient Listview in dart by using ListView.Builder constructor. And dynamically inflate ListTile as the List element.

basic of flutter listview 

Steps to implement Flutter listview long list with memory efficient

1. Prepare a data source.

You need to prepare a data source which you want to inflate in each of the list item within your listview.

2. Convert data source into Widgets.

Then you need to convert the data source you have created or fetched from some out source into Widget because in the end, the flutter listview expects the array of widgets.

3. Use widgets as a children of a listview.

Finally you have to use all the widget as a children of the listview.

So let us follow the above steps & implement flutter listview dynamically.

1. Preparing a data source for flutter listview

Snippet code 

List<String> getListElements() {
  var items = List<String>.generate(1000, (counter) => "Item $counter"); // generate iten from 0 to 999
  return items;
}

The above snippet code will simple generate list of items, which will be 1000 in number

Eg: item 0, item item 1 ,item 2,…………..item 999.

2. Converting data source into widget

Once your data source is ready you need to wrap it into your widget, so that i will define a method that will return the list view.

Where  will genetare a listview, here is am using a constructor callede listview.builder,here one of the parameter of this builder constructor is a itemBuilder. Which helps us in creating items in our listview,here we have 2 parameter(context,index).

Right now i want all of the item to be inListTile,

There we are customizing title we are fetching from data source we have created above in steps 1.

Widget getListView() {
  var listItems = getListElements();

  var listview = ListView.builder(itemBuilder: (context, index) {
    return ListTile(
      title: Text(listItems[index]),
    );
  });
  return listview;
}

3.Use widgets as a children of a listview.

Finally return a listview. and the use getListView() function in main Scaffold() in body tag. like body: getListView();

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter ListView Long Dynamic"),
        ),
        body: getListView(),
      ),
    ),
  );
}

Our Application has lots of Items to be displayed on the device screen but still out app is memory efficient just because Listview.builder function simply calls onlt for those elements that can be visible on the screen Therefore element which  are hiding behind the screen are not been loaded into the memory thus it is memory efficient.

if you need to add further customize your listitems by using lending attribute like Icons,it is totally up to your wish what extra customization you want to make to your Flutter ListView application.

return ListTile(
      title: Text(listItems[index]),
      leading: Icon(Icons.games),
      trailing: Icon(Icons.wb_sunny),
      subtitle: Text("Visit : ProtoCoderspoint to learn more"),
    );

Full Source Code on Flutter ListView Long List Memory Efficient Dynamic 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter ListView Long Dynamic"),
        ),
        body: getListView(),
      ),
    ),
  );
}

List<String> getListElements() {
  var items = List<String>.generate(1000, (counter) => "Item $counter");
  return items;
}

Widget getListView() {
  var listItems = getListElements();

  var listview = ListView.builder(itemBuilder: (context, index) {
    return ListTile(
      title: Text(listItems[index]),
    );
  });
  return listview;
}

This solution to remove some of the major drawback of basic flutter listview.

Long List ListView

• For Huge number of list Items.
• Loads only few item that can be visible on the screen remaining will be hidden in background.
• Do use it for large number of items since it ismemory efficient.
• Wrap ListView as home of Scaffold widget as it is scrollable and might overflow beyond the screen.