Listing of Items in Flutter

In any mobile application, listing of data is very fundamental need. And, in this blog, we are going to learn how to display list of items in flutter.

There are usually two types of use-cases regarding listing of data:

1. Displaying List having few number of items
2. Displaying List having large number of items

So, Let’s go through each one of the above mentioned use-cases

1. Few Items:

Flutter provides us with a widget termed as ListView for listing of items.

If we want to display fixed list of few items , than we can use make use of ListView constructor like this:

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.home),
      title: Text('Home'),
    ),
    ListTile(
      leading: Icon(Icons.search),
      title: Text('Search'),
    ),
    ListTile(
      leading: Icon(Icons.info),
      title: Text('Info'),
    ),
    ListTile(
      leading: Icon(Icons.exit_to_app),
      title: Text('Logout'),
    ),
  ],
);

ListView constructor takes list of ListTile widgets.

Here, ListTile widget is used to provide visual representation to each and every element of list.

In real life, these kind of listing is mostly used on the drawer screen of mobile application, where there is standard fixed and few number of items are present.

Below, is the full implementation code:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
       children: <Widget>[
         ListTile(
           leading: Icon(Icons.home),
           title: Text('Home'),
         ),
         ListTile(
           leading: Icon(Icons.search),
           title: Text('Search'),
         ),
        ListTile(
          leading: Icon(Icons.info),
          title: Text('Info'),
        ),
       ListTile(
         leading: Icon(Icons.exit_to_app),
         title: Text('Logout'),
       ),
     ],
    );
  }
}

2. Large number of items

But, what if we want to display a list that contains a large amount of data ?

In this case, we cannot use ListView constructor as it is useful in case of few items only.

So, what should we use ?

For this purpose only, ListView.builder() is provided by flutter.

Note* : ListView is by default scrollable in flutter

Let’s go through the actual implementation of ListView.builder()

// created list of 25 items
final data = List<String>.generate(25, (int index) => 'sqRoot ${index * index}');
ListView.builder(
  itemCount: data.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('${data[index]}'),
    );
  },
);

Here, we have generated data of 25 items and then provided it to ListView.builder.

ListView.builder consists of two parts:

1. itemCount: total number of elements
2. itemBuilder: It takes context and index of data element, and builds ListTile for each and every data element

Note* : ListView.builder() creates items as user scrolls down whereas, ListView() constructor creates all the items at once.

Below is the full implementation of ListView.builder

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(data: List<String>.generate(25, (int index) => 'sqRoot ${index * index}')),
        ),
      ),
    );
  }
}
class MyWidget extends StatelessWidget {
  final List<String> data;
  MyWidget({Key key, this.data}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
       itemCount: data.length,
       itemBuilder: (context, index){
        return ListTile(
           leading: Icon(Icons.info),
           title: Text('${data[index]}'),
         );
       }
    );
  }
}

Hope you liked it.

For more such information, stay tuned…

Happy Coding 🙂