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.

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:

If you have any doubt or if you want to get the structure of full code, just read the previous lessons.
There are no words to show my appreciation!
Like!! Great article post.Really thank you! Really Cool.