Still using listview? Use animatedlist to make list elements move

Preface

Lists are the most used components in mobile applications , We also often add or delete list elements , The simplest way is to change the list data , direct setState Update list interface . One drawback of this approach is that list elements will suddenly disappear （ Delete ） Or appear （ add to ）, When the contents of the list elements are close , We don't even know if the operation was successful . And if there is a dynamic effect to show the process of disappearance and emergence , Then the experience will be much better , For example, the following effects , When deleting elements , There will be a disappearing animation , When adding elements, there will be a gradual effect .

What is used here is AnimatedList, The sample code of this article is mainly from the official documents :AnimatedList Components . It should be noted that , After all, the list is animated , It will definitely have an impact on performance , It is suggested that only the elements that need to be deleted 、 Increase the list of small amounts of data for operations .

AnimatedList Introduce

AnimatedList yes ListView An alternative , Constructors are basically the same as ListView Agreement .

const AnimatedList({
  Key? key,
  required this.itemBuilder,
  this.initialItemCoun