We’ve already discussed how a custom scroll view works. A ListView is basically a CustomScrollView.
However, a custom scroll view has many features that a ListView doesn’t have. As a result, a ListView is not always sufficient.
We may ask, what is the limitation of ListView?
Firstly, although a ListView is a custom scroll view, it’s got only useful feature from custom scroll view; and, that is a single SliverList in its CustomScrollView.slivers property.
Let’s try to understand this concept and dig deep.
Sometimes, and in many case, most of the time, we need a SliverAppBar. With reference to this, you may read our previous post on collapsing toolbar.
In such cases, ListView is not sufficient. Therefore, in those cases, it’s wise to use CustomScrollView directly.
However, a ListView and a CustomScrollView has some similarities too. At least, if you consider a few properties, such as, key, controller, etc.
How do I use ListView in flutter?
Before we use ListView let us try to understand a few other key concepts.
Apart from these similarities and differences, we need to use ListView frequently. In fact, although there are many scrolling widgets, still ListView is the most commonly used. It displays children one after another while we scroll.
Let’s see the one example of ListView where it displays a list of student instances one after another.
Now, as the scroll direction takes us towards the lower section, we can see the third and the last student instance.
How many types of ListView are there in flutter?
We can construct ListView using four methods. We’ve already seen how we can use ListView by constructors like ListView.builder, ListView.custom, and ListView.separated.
Likewise, the ListView constructor takes an List<Widget> of children. We’ll see in a minute, how this constructor fits for the list of instances to be displayed as children.
But, there is a caveat that we should take care of. ListView is good for small number of children. Since, it doesn’t build child items on demand, it requires heavy work in constructing the List of children.
The ListView constructs every child; whether they are in the viewport being displayed in the list view, or not. As a result it’s wise to work with small number of items. And, that saves system resources, making our flutter app highly performant.
Let’s take a look at the full code below.
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
class Student {
final String id;
final String name;
final String imageUrl;
Student({
required this.id,
required this.name,
required this.imageUrl,
});
}
/// adding id and images
List<Student> students = [
Student(
id: 's1',
name: 'Json',
imageUrl:
'https://cdn.pixabay.com/photo/2018/09/11/19/49/education-3670453_960_720.jpg',
),
Student(
id: 's2',
name: 'Limpi',
imageUrl:
'https://cdn.pixabay.com/photo/2016/11/29/13/56/asian-1870022_960_720.jpg',
),
Student(
id: 's3',
name: 'Maria',
imageUrl:
'https://cdn.pixabay.com/photo/2017/09/21/13/32/girl-2771936_960_720.jpg',
),
];
class ListViewSample extends StatelessWidget {
const ListViewSample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Students Name',
home: StudentsHomePage(),
);
}
}
class StudentsHomePage extends StatelessWidget {
const StudentsHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Students Home Page'),
),
body: ListView(
children: students.map((e) {
return AllStudents(title: e.name, image: e.imageUrl);
}).toList(),
),
);
}
}
class AllStudents extends StatelessWidget {
final String title;
final String image;
const AllStudents({
Key? key,
required this.title,
required this.image,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Container(
padding: const EdgeInsets.all(
5.0,
),
margin: const EdgeInsets.all(
5.0,
),
child: Text(
title,
style: const TextStyle(
fontFamily: 'Allison',
fontSize: 80.0,
fontWeight: FontWeight.bold,
),
),
),
Image.network(
image,
fit: BoxFit.cover,
width: 150,
height: 150,
),
],
),
);
}
}The above code snippet is quite simple. As the ListView constructor takes an List<Widget> of children, we map our Student list and return name and image properties through constructor of another widget.
Because it’s a simple list, we don’t have to work very hard to display the small student instances using ListView.
By the way, you may want to take a look at the other Scrolling Widgets, before we close down further reading on this topic.
We have a list below.
What is ListView Flutter? How do I use ListView in Flutter?
How do I use SingleChildScrollView in flutter?
What is GridView and how do you centre a GridView item in Flutter?
What is GridView builder in Flutter?
What is the grid view in Flutter?
What is GridView count in flutter?
What is GridView.extent in Flutter?
How do I make my collapsing toolbar flutter?
What is SliverGrid in flutter?
How to use CustomScrollView in Flutter?
How to use NestedScrollView in flutter?
How to use PageView in Flutter
What is PageView builder in flutter?
What is PageView custom in flutter?
How to use DraggableScrollableSheet
What is ListView builder in flutter
Leave a Reply