Trendlist: [New post] ListView custom in Flutter

Thursday, December 16, 2021

[New post] ListView custom in Flutter

Respond to this post by replying above this line

ListView custom in Flutter

by Sanjib Sinha

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 SliverChildDelegate childrenDelegate 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.