Skip to content

A Flutter widget that implicitly animates a list whenever it rebuilds with new items.

License

Notifications You must be signed in to change notification settings

factisresearch/implicitly_animated_list

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Often, your lists represent some kind of data.

You can just pass the original list data to the ImplicitlyAnimatedList as well as an itemBuilder for building a widget from one data point and it'll animate whenever the data changes:

ImplicitlyAnimatedList(
  // When you change items of this list and hot reload, the list animates. 
  itemData: [1, 2, 3, 4],
  itemBuilder: (_, number) => ListTile(title: Text('$number')),
),

It works with all classes and works well with StreamBuilder:

class User {
  String firstName;
  String lastName;

  // The ImplicitlyAnimatedList uses the == operator to compare items.
  bool operator== (Object other) => other is User
    && firstName == other.firstName
    && lastName == other.lastName;
}

...

StreamBuilder<List<User>>(
  stream: someSource.usersStream,
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return ...;
    }
    return ImplicitlyAnimatedList(
      itemData: snapshot.data,
      itemBuilder: (context, user) {
        return ListTile(title: Text('${user.firstName} ${user.lastName}'));
      }
    );
  }
),

Here's an example that generates random numbers and animates from one state to the next (notice it's only 10 fps because of being a gif):

example showcase

About

A Flutter widget that implicitly animates a list whenever it rebuilds with new items.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Dart 88.5%
  • Swift 6.0%
  • Kotlin 5.0%
  • Objective-C 0.5%