Flutter ListView with Scrollable ListTile and Scrollbar

List and Listing item are the one of the main tool in all type of software or application. Normally in Flutter ListView is scrollable in default, but in other cases, you need to change the code to make the content is to be scrollable.

Table of Contents

Scrollable Static ListView

In Case of a List, the widget ListView is the main section and the ListTile is the child item on the list.

ListView(
  children: <Widget>[
    ListTile(
      title:Text('Name'),
    ),
  ],
),

Output:

In this code, here is a List View contains only one list item (ListTile).

If you want an icon with text, then add the property ‘leading’.

ListTile(
  leading: Icon(Icons.person),
  title: Text('Name'),
)

Output:

This ListView is scrollable in default. Let’s check by adding more ListTile into the listView.

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.person),
      title: Text('Name'),
    ),
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Location'),
    ),
    ListTile(
      leading: Icon(Icons.alarm),
      title: Text('Time'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Number'),
    ),
    ListTile(
      leading: Icon(Icons.restaurant),
      title: Text('Hotel'),
    ),
    ListTile(
      leading: Icon(Icons.laptop),
      title: Text('Computer'),
    ),
    ListTile(
      leading: Icon(Icons.android),
      title: Text('Android Phone'),
    ),
    ListTile(
      leading: Icon(Icons.people),
      title: Text('Family'),
    ),
    ListTile(
      leading: Icon(Icons.assessment),
      title: Text('Status'),
    ),
    ListTile(
      leading: Icon(Icons.arrow_forward),
      title: Text('Direction'),
    ),
    ListTile(
      leading: Icon(Icons.line_style),
      title: Text('Details'),
    ),
    ListTile(
      leading: Icon(Icons.add_a_photo),
      title: Text('Photo'),
    ),
  ],
),

Output:

Dynamic Long Lists

In above ListView, we added static data as listTile. We can create long list view with dynamic contents and loops.

Here, builder property of ListView is used to build dynamic number of list items.

ListView.builder(
  itemCount: 5,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text("hello"),
    );
  },
),

In this code, Item Count is 5, so a list will generate with text ‘hello’ for 5 times.

Custom dynamic listview content on flutter

Dynamic Data:

This code will list numbers from 1 to 10.

class _MyAppState extends State<MyApp> {
  int limit = 10;
  int number = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("My App Title"),
      ),
      backgroundColor: Colors.white,
      body: ListView.builder(
        itemCount: limit,
        itemBuilder: (context, index) {
          number++;
          return ListTile(
            title: Text('$number'),
          );
        },
      ),
    );
  }
}

Explanation:

Here variable limit and number declared and initialized at first with the value 10 and 0 respectively. The number of the list item is limited with the variable limit with the property ‘itemCount’. In itemBuilder, variable number incremented by one.

Creating Line Divider Between List Items

You can make divider line using many methods. Here a row is created as the list item and first item of the row is the ListTile and second item is the divider line.

ListView.builder(
  itemCount: limit,
  itemBuilder: (context, index) {
    number++;
    return Column (
      children: <Widget>[
       ListTile(
       title: Text('$number'),
      ),
      Divider(),
      ],
    );
  },
),

Output:

Scrollbar Indicator for ListView

In default, listView does not has a scroll bar. If you want scrollbar, then just make the list view as a child of the Scrollbar widget.

Scrollbar(
    child: ListView.builder(
      itemCount: limit,
      itemBuilder: (context, index) {
        number++;
        return ListTile(
          title: Text('$number'),
        );
      },
    ),
)

Output:

Flutter Scrollable listview with scrollbar

If you have any doubt or if you want to get the structure of full code, just read the previous lessons.

Flutter ListView with Scrollable ListTile and Scrollbar

Scrollable Static ListView

Dynamic Long Lists

Dynamic Data:

Explanation:

Creating Line Divider Between List Items

Scrollbar Indicator for ListView

2 Comments

Leave a Reply Cancel reply