Sanjib Sinha posted: " Photo by Mandeep Boparai on Unsplash ListView is not like other ListView constructors and good for a small list of children. We've already discussed how a custom scroll view works. A ListView is basically a CustomScrollView. Ho"
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.
ListView scroll upper part
Now, as the scroll direction takes us towards the lower section, we can see the third and the last student instance.
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.
Sanjib Sinha posted: " Photo by Bjorn Pierre on Unsplash The ListView custom constructor is another type of ListView. It's different than others. We've already learned that a ListView is a widget that arranges a scrollable list of widgets linearly. More"
The ListView custom constructor is another type of ListView. It's different than others.
We've already learned that a ListView is a widget that arranges a scrollable list of widgets linearly. Moreover, we can construct ListView using four ways. We've seen two ListView constructors in our previous sections. ListView.builder and ListView.separated constructors play different roles in building a scrollable, linear array of widgets.
However, with a custom child model a ListView can control the algorithm used to estimate the size of children that are not actually visible.
The ListView.custom constructor is not like other two constructors. It takes a SliverChildDelegate, which provides the ability to customise additional aspects of the child model.
In this section we'll see how we can use ListView.custom constructor to display a list of Student instances, using text and image. Moreover, we can also use a method to reverse the list, by changing the state of our UI.
Whenever, we discuss the scrolling widgets or slivers, we must remember that we need to preserve the state of child elements when they are scrolled in and out of view,
There are several options available, whatsoever. But, at present we will use provider package to manage the state.
How do I create a ListView with image and text in flutter?
Certainly, we can create a ListView with image and text in flutter with either ListView.builder and ListView.separated constructors. But, we can use ListView.custom constructor with a required parameter SliverChildDelegatechildrenDelegate that helps us to customise the child elements.
To understand this mechanism, let's consider a model class of students that will have id, name and an image property. Along with these properties, we've also added a method that will reverse the list on demand.
import 'package:flutter/foundation.dart'; class Student with ChangeNotifier { final String id; final String name; final String imageUrl; Student({ required this.id, required this.name, required this.imageUrl, }); } class Students with ChangeNotifier { /// 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', ), ]; void reverse() { students = students.reversed.toList(); notifyListeners(); } }
Now, we're going to take a look at the required parameter of ListView.custom constructor, which plays a very important role in building children.
WordPress.com
