https://github.com/marcelgarus/implicitly_animated_list
A Flutter widget that implicitly animates a list whenever it rebuilds with new items.
https://github.com/marcelgarus/implicitly_animated_list
Last synced: over 1 year ago
JSON representation
A Flutter widget that implicitly animates a list whenever it rebuilds with new items.
- Host: GitHub
- URL: https://github.com/marcelgarus/implicitly_animated_list
- Owner: MarcelGarus
- License: mit
- Created: 2019-10-14T09:50:00.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-12-21T09:05:38.000Z (over 1 year ago)
- Last Synced: 2025-03-24T08:47:51.617Z (over 1 year ago)
- Language: Dart
- Size: 2.06 MB
- Stars: 10
- Watchers: 2
- Forks: 7
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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:
```dart
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`:
```dart
class User {
const User({required this.firstName, required this.lastName});
final String firstName;
final String lastName;
// The ImplicitlyAnimatedList uses the == operator to compare items.
bool operator ==(Object other) => other is User
&& firstName == other.firstName
&& lastName == other.lastName;
}
...
StreamBuilder>(
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):
In addition to `ImplicitlyAnimatedList`, there's also `SliverImplicitlyAnimatedList` for use in a `CustomScrollView`:
```dart
CustomScrollView(
slivers: [
SliverImplicitlyAnimatedList(
itemData: myListOfItems,
itemBuilder: (context, item) => ListTile(title: Text('$item')),
),
// ...
],
),
```