Blog

If you are listing items then probably you are using listview. How about with just a few lines of code you animate that list as data changes. This piece will explore such examples in a step by step manner.

Example 1: Impliciltly Animate a List

Throyugh this solution you can just pass the original list data to the ImplicitlyAnimatedList class as well as an itemBuilder for building a widget from one data point and it'll animate whenever the data changes.

Here is what will be created:

Step 1: Copy ImplicitlyAnimatedList class

Copy this file into your project.

Step 2: Write Code

Here's how you use it, you pass your list as well as well as an itemBuilder:

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}'));
      }
    );
  }
),

Full Example

Let's look at a full example. Start by copying the ImplicitlyAnimatedList file into your project as we had stated above.

Then make your imports:

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:implicitly_animated_list/implicitly_animated_list.dart';

In the main method you will run the MyApp instance:

void main() => runApp(MyApp());

You create the MyApp as a stateful widget:

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

Then you create the state class:

class _MyAppState extends State<MyApp> {

A variable array that will hold numbers generated randomly is included as an instance field of this state class:

  var numbers = <int>[];

Build the page containing a floatingaction button:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Implicitly animated list')),
        floatingActionButton: FloatingActionButton.extended(
          label: Text('Generate numbers'),
          icon: Icon(Icons.directions_walk),

When the floating action button is pressed, numbers will be generated randomly using the List.generate() function:

          onPressed: () => setState(() {
            numbers = List.generate(10, (_) => Random().nextInt(10));
            print(numbers);
          }),

Then in the body, you pass that generated numbers array to the ImplicitlyAnimatedList class:

        body: ImplicitlyAnimatedList(
          itemData: numbers,
          itemBuilder: (_, number) => ListTile(title: Text('$number')),
        ),

Here is the full code:

main.dart

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:implicitly_animated_list/implicitly_animated_list.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  var numbers = <int>[];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Implicitly animated list')),
        floatingActionButton: FloatingActionButton.extended(
          label: Text('Generate numbers'),
          icon: Icon(Icons.directions_walk),
          onPressed: () => setState(() {
            numbers = List.generate(10, (_) => Random().nextInt(10));
            print(numbers);
          }),
        ),
        body: ImplicitlyAnimatedList(
          itemData: numbers,
          itemBuilder: (_, number) => ListTile(title: Text('$number')),
        ),
      ),
    );
  }
}

Run

To run the code, copy the ImplicitlyAnimatedList file into your project, then replace your main.dart with the above code.

Alternatively proceed to download the whole project below.

Reference

Here are reference links:

No.	Link
1.	Download code
2.	Follow code author