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 at HERE.

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

@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(

));
}

 
 

Flutter Animation

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

Flutter Animated ListView

List<String> listSoccerPlayers = [
    ‘Cristiano Ronaldo’,
    ‘Lionel Messi’,
    ‘Kevin De Bruyne’,
    ‘Neymar’,
    ‘Kylian MbappĂ©’,
    ‘Robert Lewandowski’
];
final GlobalKey<AnimatedListState> keyList = GlobalKey();

body: AnimatedList(
    key: keyList,
    initialItemCount: listSoccerPlayers.length,
    itemBuilder: (context, index, animation) =>
        soccerPlayerRow(context, listSoccerPlayers[index], animation),
)

 
 

Add Item in Flutter Animated ListView

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

 
 

Remove Item from List View Flutter

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

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

 
 
flutter animated listview
 

Leave a Reply