Your list is too laggy? These four optimizations can make your list silky smooth

Preface

list  ListView  Is the most common component in the application , And lists often carry many elements , When there are many elements , Especially when the picture file is large , It may cause the list to get stuck , In severe cases, it may cause the application to crash . This article describes how to optimize lists .

Optimization point 1： Use  builder Build list

When your list elements are growing dynamically （ For example, pull up to load more ）, Please don't use it directly

children

  The way , Keep going

children

  Add components to the array , That would be terrible .

// Bad usage
ListView(
 children: [
 item1,
 item2,
 item3,
 ...
 ],
)

// The right way to use
ListView.builder(
 itemBuilder: (context, index) => ListItem(),
 itemCount: itemCount,
)


about  ListView.builder  Is to build list elements on demand , That is, only those visible elements will call itemBuilder  Build element , In this way, the performance overhead for large lists will naturally be much smaller .

Creates a scrollable, linear array of widgets that are created on demand.This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

Optimization point 2： Ban  addAutomaticKeepAlives  and  addRepaintBoundaries  characteristic

Both of these are for the purpose of optimizing the user experience .

addAutomaticKeepAlives

  The default property is  

true

, It means that the state of the list element can be maintained after the list element is invisible , So that when it appears on the screen again, it can quickly build . This is actually a way to trade space for time , It will cause a certain degree of memory overhead . It can be set to  

false

  Turn off this feature . The disadvantage is that there may be a short white screen when sliding too fast （ It rarely happens ）.

addRepaintBoundaries

  Is to use a redrawn boundary for list elements （Repaint Boundary） The parcel , So that redrawing can be avoided when scrolling . And if the list is easy to draw （ When the layout of list elements is relatively simple ） When , You can turn this feature off to improve the smoothness of scrolling .

addAutomaticKeepAlives: false,
addRepaintBoundaries: false,


Optimization point 3： Use the same components in the list elements as much as possible  const  modification

Use  

const

  It is equivalent to caching elements to realize sharing , If some parts of the list element remain unchanged , Then you can use  

const

  modification .

return Padding(
 child: Row(
 children: [
 const ListImage(),
 const SizedBox(
 width: 5.0,
 ),
 Text(' The first $index  Elements '),
 ],
 ),
 padding: EdgeInsets.all(10.0),
);


Optimization point 4： Use  itemExtent  Determines the size of the scroll direction of the list element

For many lists , Our size in the rolling direction is in advance according to  UI The design draft knows , If you can know , So use  

itemExtent

  Property specifies the size of the list element in the scrolling direction , Can improve performance . This is because , If not specified , During scrolling , It is necessary to calculate the size of each element in the rolling direction, which consumes computing resources .

itemExtent: 120,


Optimization examples

Here's a list of things you didn't change at first , Um. , Think of it as

Junk code

.

class LargeListView extends StatefulWidget {
 const LargeListView({Key? key}) : super(key: key);

 @override
 _LargeListViewState createState() => _LargeListViewState();
}

class _LargeListViewState extends State<LargeListView> {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text(' Big list '),
 brightness: Brightness.dark,
 ),
 body: ListView(
 children: List.generate(
 1000,
 (index) => Padding(
 padding: EdgeInsets.all(10.0),
 child: Row(
 children: [
 Image.network(
 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7869eac08a7d4177b600dc7d64998204~tplv-k3u1fbpfcp-watermark.jpeg',
 width: 200,
 ),
 const SizedBox(
 width: 5.0,
 ),
 Text(' The first $index  Elements '),
 ],
 ),
 ),
 ),
 ),
 );
 }
}


Of course , It won't actually use

 List.generate

  To generate list elements ,

But don't use one  

List<Widget>

  List objects always add list elements to them , Then take this list as  

ListView

  Of  

children

！

The modified code is as follows , Because you split the list elements into smaller pieces , The amount of code is more , But the performance will be much better .

import 'package:flutter/material.dart';

class LargeListView extends StatefulWidget {
 const LargeListView({Key? key}) : super(key: key);

 @override
 _LargeListViewState createState() => _LargeListViewState();
}

class _LargeListViewState extends State<LargeListView> {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text(' Big list '),
 brightness: Brightness.dark,
 ),
 body: ListView.builder(
 itemBuilder: (context, index) => ListItem(
 index: index,
 ),
 itemCount: 1000,
 addAutomaticKeepAlives: false,
 addRepaintBoundaries: false,
 itemExtent: 120.0,
 ),
 );
 }
}

class ListItem extends StatelessWidget {
 final int index;
 ListItem({Key? key, required this.index}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 return Padding(
 child: Row(
 children: [
 const ListImage(),
 const SizedBox(
 width: 5.0,
 ),
 Text(' The first $index  Elements '),
 ],
 ),
 padding: EdgeInsets.all(10.0),
 );
 }
}

class ListImage extends StatelessWidget {
 const ListImage({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 return Image.network(
 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7869eac08a7d4177b600dc7d64998204~tplv-k3u1fbpfcp-watermark.jpeg',
 width: 200,
 );
 }
}


summary

This article introduces  Flutter 

ListView

  Of 4 There are two optimization points , Very practical ！ actually , These key points can be found in the documents on the official website . therefore , If you encounter performance problems , Besides search engines , It is also recommended to read more official documents . Another one , For list pictures , Sometimes it also needs to fit the front and rear ends , For example, the current mobile phones are known as 1 Billion pixels , If you upload the original image directly , Then loading such a large picture must be very resource consuming . In this case , The suggestion is to generate list thumbnails （ You may need to generate different thumbnails for different screen sizes , For example, the article header of nuggets , There are several resolutions ）.

Welcome to follow individual public number ：

Ma Nong on the island