In Flutter Dart ListView.builder() widget is used to make both simple and dynamic List. The ListView.builder() widget comes with a super functionality that it can load only the items which is showing on the mobile screen and dose not load all the items together. This would make the ListView more fast and memory efficient. Because using this it will not take more memory and app will run on Low RAM. The ListView.builder() widget has a return area which is loaded every time only when user scrolls the screen and load only items which is displaying on device screen area. So using this we can load thousands of items in ListView widget without lagging the device. So in this tutorial we would learn about Flutter Create Long Dynamic ListView with Thousands of Items Memory Efficient Android iOS Example Tutorial.
Contents in this project Flutter Create Long Dynamic ListView with Thousands of Items Memory Efficient Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call our main MyApp View class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with StatelessWidget. This is our main View class.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create a String type List function named as getListViewItems(). Inside the function we would use the Generate() inbuilt method of List String to automatically generate ten thousands items. These items would be our ListView widget items.
|
1 2 3 4 5 6 7 |
List<String> getListViewItems() { var items = List<String>.generate(10000, (count) => " Item $count "); return items ; } |
5. Create a custom Widget named as customListView(). Inside this widget first we would call the getListViewItems() function and get all the items in listItems variable. Now we would call ListView.builder() widget and return the ListTile widget in return. This would make the ListView with 10,000 list items.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Widget customListView(){ var listItems = getListViewItems() ; var listView = ListView.builder( itemBuilder: (context, index){ return ListTile( title: Text(listItems[index]), leading: Icon(Icons.arrow_forward), onTap: (){print('ListView Item = '+'$index' + ' Clicked ');}, ); } ); return listView ; } |
6. Create Widget Build area in MyApp class now we would call the Scaffold widget and call the custom widget customListView() in body section of Scaffold widget. This would make the ListView on screen with all the items.
|
1 2 3 4 5 6 7 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea(child: customListView()) ) ); } |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { List<String> getListViewItems() { var items = List<String>.generate(10000, (count) => " Item $count "); return items ; } Widget customListView(){ var listItems = getListViewItems() ; var listView = ListView.builder( itemBuilder: (context, index){ return ListTile( title: Text(listItems[index]), leading: Icon(Icons.arrow_forward), onTap: (){print('ListView Item = '+'$index' + ' Clicked ');}, ); } ); return listView ; } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea(child: customListView()) ) ); } } |
Screenshots:
