How to create animated list view in Flutter without any package: AnimatedList widget

In this post I will show you how to create animated list view using AnimatedList widget in Flutter without using any external package.

First. let’s create a main.dart file and insert this code:

import 'package:flutter/material.dart';

import 'home_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light().copyWith(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.amber,
        ),
      ),
      home: const AnimatedListExample(),
    );
  }
}

Next, create home_screen.dart file and copy and paste the following code. Once you have done if you run your app you should see app bar, list view which is built with AnimatedList widget, and FloatingActionButton.

import 'package:flutter/material.dart';

class AnimatedListExample extends StatefulWidget {
  const AnimatedListExample({super.key});

  @override
  State<AnimatedListExample> createState() => _AnimatedListExampleState();
}

class _AnimatedListExampleState extends State<AnimatedListExample> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
  final listKey = GlobalKey<AnimatedListState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animated List Example'),
      ),
      body: AnimatedList(
        key: listKey,
        initialItemCount: items.length,
        itemBuilder: (context, index, animation) {
          return buildItem(items[index], animation, index);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: addItem,
        child: const Icon(Icons.add),
      ),
    );
  }

  Widget buildItem(String item, Animation<double> animation, int index) {
    return SizeTransition(
      sizeFactor: animation,
      child: Card(
        child: ListTile(
          title: Text(item),
          trailing: IconButton(
            icon: const Icon(Icons.delete),
            onPressed: () => removeItem(index),
          ),
        ),
      ),
    );
  }

  void addItem() {
    final index = items.length;
    items.add('Item ${index + 1}');
    listKey.currentState?.insertItem(index);
  }

  void removeItem(int index) {
    listKey.currentState?.removeItem(
      index,
      (context, animation) {
        animation.addStatusListener((status) {
          if (status == AnimationStatus.dismissed) {
            items.removeAt(index);
          }
        });
        return buildItem(items[index], animation, index);
      },
    );
  }
}

This is how you create animated list view in Flutter without an external package.

---

See Also