Animated list In Flutter

In this blog, I am telling Implement the animated list. In this app, we will present the normal list item how to display Listview using Flutter Animated List widget. It will not contain any kind of package in it. We will implement a demo of the Animated list in your flutter applications.

Table of Contents :

Flutter

Animated List

Code Implementation

Code File

Conclusion

Flutter :

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

Animated list:

The Animated list is like a list.you can update and delete the list in this list. But with the normal list view application, the user will not know about the update. So we can add and remove any list. in this, the user will know about the update in the animated list widget we can change different types of animation transitions. And for flutter development, we can get it easily by using animated list class.

Demo Module :

Code Implementation :

Create a new dart file calledanimated_list inside the lib folder.

final key = GlobalKey<AnimatedListState>();

We will use this 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 and experiment according to your own, this little introduction was from the Animated list our side.

I hope this blog helps will provide you with sufficient information in Trying up the Animated list in your flutter project. So please try it.

❤ ❤ 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.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.