Flutter Animated ListView Example

This article explains you how to implement flutter animated listview in mobile applications to update user. You can also checkout flutter list view related articles.

In this example, we will integrate listview using flutter animated list widget using example. We will animate listview while items of listview are updated. If we will add new item or remove an item from list then this process will be done with animation.

We will display soccer players names in card UI in list view. We will also add two buttons in app bar: Add & Remove. So user can add or remove soccer player using these buttons. Animated List widget is very useful to notify user in flutter application if items are dynamically inserted or removed.

Flutter List View UI

Flutter Animation

Flutter Animated ListView

Add Item in Flutter Animated ListView

Remove Item from Animated List View Flutter

Final Code

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

class AnimatedListScreen extends StatefulWidget {
  @override
  _AnimatedListScreenState createState() => _AnimatedListScreenState();
}

class _AnimatedListScreenState extends State<AnimatedListScreen> {
  List<String> listSoccerPlayers = [
    'Cristiano Ronaldo',
    'Lionel Messi',
    'Kevin De Bruyne',
    'Neymar',
    'Kylian Mbappé',
    'Robert Lewandowski'
  ];
  final GlobalKey<AnimatedListState> keyList = GlobalKey();
  var randomNo = new Random();

  addSoccerPlayer() {
    setState(() {
      int generateId = randomNo.nextInt(5000);
      listSoccerPlayers.insert(0, "Football Player $generateId");
      keyList.currentState.insertItem(0, duration: const Duration(seconds: 1));
    });
  }

  removeSoccerPlayer() {
    setState(() {
      keyList.currentState?.removeItem(
        0, (BuildContext context, Animation<double> animation) =>
            soccerPlayerRow(context, listSoccerPlayers[0], animation), duration: const Duration(seconds: 1),
      );
      listSoccerPlayers.removeAt(0);
    });
  }

  Widget soccerPlayerRow(
      BuildContext context, String item, Animation<double> animation) {
    return SizeTransition(
      axis: Axis.vertical,
      sizeFactor: animation,
      child: SizedBox(
        width: double.infinity,
        child: Card(
            margin: EdgeInsets.all(15),
            elevation: 5,
            child: Container(
                padding: EdgeInsets.all(10),
                child: Row(children: [
                  Text(item,
                      style:
                          TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
                ]))),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:
            AppBar(title: Text('Flutter Animated ListView'), actions: [
          // action button
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              addSoccerPlayer();
            },
          ),
              IconButton(
                icon: Icon(Icons.remove_circle),
                onPressed: () {
                  removeSoccerPlayer();
                },
              ),
        ]),
        body: AnimatedList(
          key: keyList,
          initialItemCount: listSoccerPlayers.length,
          itemBuilder: (context, index, animation) =>
              soccerPlayerRow(context, listSoccerPlayers[index], animation),
        ));
  }
}