Animated List In Flutter

In this blog, I am going to implement the animated list in flutter. This blog explains how the normal list item can be executed using Flutter Animated List widget as well as there won’t be any kind of package needed to run this implementation.

Flutter :

“Flutter is Google’s UI toolkit that helps you build beautiful and natively combined application for mobile, web and desktop in a single codebase in record time”

Animated List:

Animated List is a list in which you can update and delete the list in the list without interfering the layout and the user will not know about the update. So in simple words we can say that we can add and remove any list, and the user will not know about the update in the animated list widget. In case of flutter development, we can get it easily by using animated list class and they can have different animation transition for the list view.

Demo Module:

Code Implementation:

Create a new dart file called animated_list inside the libfolder.

final key = GlobalKey<AnimatedListState>();

We use global key because we can change the background in the app without losing the state of the widget. If you want to show the same widget on two different screens, then the first scenario can be an example.

AnimatedList(
  key: key,
  initialItemCount: animatedList.length,
  itemBuilder: (context, index, animation) =>
      buildItem(animatedList[index], index, animation),
),

Now we have used the animated list widget in this screen. the item builder function is called for all indexes for the list view. Like you can build all the items. In the animated list, you find an object that starts the item automatically and that you can use to animate the item. It can contain any animation.

void removeItem(int index) {
  final item = animatedList.removeAt(index);

  key.currentState.removeItem(
    index,
    (context, animation) => buildItem(item, index, animation),
  );
}

Now we will create a method named removeItem(). In which we will tell that the item is being removed from the animated list. To show the widget, we will remove the list item with the help of the builder.

void insertItem(int index, AnimatedListModel item) {
  animatedList.insert(index, item);
  key.currentState.insertItem(index);
}

We have created a method named insert item which tells the animated list that a new item has been added to the list. To create a new item which is used by the animated list.

Code File :

import 'package:flutter/material.dart';
import 'package:flutter_animated_list_demo/Constants/Constants.dart';
import 'package:flutter_animated_list_demo/list_item_widget.dart';
import 'package:flutter_animated_list_demo/model/animated_list_model.dart';
import 'package:flutter_animated_list_demo/resources/themes/appthemes.dart';
class AnimatedListDemo extends StatefulWidget {
  @override
  _AnimatedListDemoState createState() => _AnimatedListDemoState();
}
class _AnimatedListDemoState extends State<AnimatedListDemo> {
  final key = GlobalKey<AnimatedListState>();
  static final List<AnimatedListModel> animatedList = [
    AnimatedListModel(
      title: 'Julia',
      img: 'assets/images/rating_two.png',
    ),
    AnimatedListModel(
      title: 'Sam',
      img: 'assets/images/rating_four.png',
    ),
    AnimatedListModel(
      title: 'Anthony',
      img: 'assets/images/rating_one.png',
    ),
    AnimatedListModel(
      title: 'Julia',
      img: 'assets/images/rating_two.png',
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        title: Text('Animated List'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: AnimatedList(
              key: key,
              initialItemCount: animatedList.length,
              itemBuilder: (context, index, animation) =>
                  buildItem(animatedList[index], index, animation),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          insertItem(0, animatedList.first);
        },
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
        backgroundColor: Colors.pink[300],
      ),
    );
  }
  Widget buildItem(item, int index, Animation<double> animation) =>
      ListItemWidget(
        item: item,
        animation: animation,
        onClicked: () => removeItem(index),
      );
  void insertItem(int index, AnimatedListModel item) {
    animatedList.insert(index, item);
    key.currentState.insertItem(index);
  }
  void removeItem(int index) {
    final item = animatedList.removeAt(index);
    key.currentState.removeItem(
      index,
      (context, animation) => buildItem(item, index, animation),
    );
  }
}

Conclusion :

In this article, I have explained an Animated List demo, you can modify this code and experiment according to your own.

I hope this blog will help you with sufficient information in building the Animated list in your flutter project.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.