Using AnimatedList to implement adding and deleting list items.

Apr 10, 2023#Flutter811

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

AnimatedList is a stateful widget in Flutter that represents a list with animated insert and remove operations. It has properties such as itemBuilder, initialItemCount, scrollDirection, reverse, controller, primary, physics, shrinkWrap, padding, and clipBehavior. The state of AnimatedList provides methods to insert and remove items from the list with animations. To use these methods, a GlobalKey with the specified generic type needs to be used. The insertItem method adds an item to the list, while the removeItem method removes an item from the list with a specified animation. The code example demonstrates the usage of AnimatedList with insert and remove operations.

AnimatedList is a stateful widget, and its corresponding state type is AnimatedListState.

The structure of AnimatedList is as follows:

const AnimatedList({
  Key? key,
  required Widget Function(BuildContext, int, Animation<double>) itemBuilder, // Data builder
  int initialItemCount = 0, // Total length of initial data
  Axis scrollDirection = Axis.vertical, // Scroll direction
  bool reverse = false, // Whether to display from bottom to top
  ScrollController? controller, // Scroll controller, optional, controls the scroll position of the list
  bool? primary, // Whether to associate with the parent scroll
  ScrollPhysics? physics, // How to respond to user actions
  bool shrinkWrap = false,
  EdgeInsetsGeometry? padding, // Padding
  Clip clipBehavior = Clip.hardEdge,
})

There are two methods in the state to add and remove elements in the list:

Note that if the list is bound to a data source list, you cannot directly achieve the effect of updating the list by removing or adding elements. You also need to execute the following methods:

// Insert element
void insertItem(
    int index, 
    {Duration duration = _kDuration}
)
// Remove element
void removeItem(
  int index,
  Widget Function(BuildContext, Animation<double>) builder, {
  Duration duration = _kDuration,
})

When adding or removing, the specified animation will be displayed.

When using insertItem and removeItem, you usually need to use a globalKey, but the globalKey needs to specify the generic type in order to call the methods to add and remove list elements:

final globalKey = GlobalKey<AnimatedListState>();

To add an element, you only need to:

list.add("New data");
globalKey.currentState!.insertItem(list.length - 1);

Removing an element is more complicated because you need to display the animation when the element leaves and then delete the corresponding entry in the data source:

Usually, we need to create a _buildItem method to dynamically create child elements. When executing removeItem, first create an identical child element in the callback, fade it out using animation, and finally delete the data in the data array.

// Remove element
_delItem(index) {
    globalKey.currentState!.removeItem(index, (context, animation) {
        // Get the element to be removed and fade it out
        var removeItem = _buildItem(index);
        return FadeTransition(
            // Execute animation
            opacity: animation,
            child: removeItem,
        );
    });
    list.removeAt(index); // Delete data from the array
}

Complete code#

// AnimatedList
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // Define a globalKey
  final globalKey = GlobalKey<AnimatedListState>();
  List<String> list = ["First data", "Second data"];
  bool flag = true;
  Widget _buildItem(index) {
    return ListTile(
      title: Text(list[index]),
      trailing: IconButton(
        icon: const Icon(Icons.delete),
        onPressed: () {
          // Execute deletion
          _delItem(index);
        },
      ),
    );
  }

  // Remove element
  _delItem(index) {
    globalKey.currentState!.removeItem(index, (context, animation) {
      // Get the element to be removed and fade it out
      var removeItem = _buildItem(index);
      list.removeAt(index); // Delete data from the array
      return FadeTransition(
        // Execute animation
        opacity: animation,
        child: removeItem,
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("kano")),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        // This will not work on AnimatedList by directly manipulating the list
        onPressed: () {
          // setState(() {
          //   list.add("New data");
          // });
          /// Use the insertItem method in AnimatedList
          list.add("New data");
          globalKey.currentState!.insertItem(list.length - 1);
        },
      ),
      // Animated list with animation
      body: AnimatedList(
        key: globalKey,
        initialItemCount: list.length,
        itemBuilder: (context, index, animation) {
          // Fade transition opacity enters from 0 to 1 and exits in reverse
          return FadeTransition(opacity: animation);
          // Scale transition
          // return ScaleTransition(scale: animation);
        },
      ),
    );
  }
}

Demo#

1-3[1].gif

// AnimatedList class HomePage extends StatefulWidget { const HomePage({super.key}); @override State<HomePage> createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { // Define a globalKey final globalKey = GlobalKey<AnimatedListState>(); List<String> list = ["First data", "Second data"]; bool flag = true; Widget _buildItem(index) { return ListTile( title: Text(list[index]), trailing: IconButton( icon: const Icon(Icons.delete), onPressed: () { // Execute deletion _delItem(index); }, ), ); } // Remove element _delItem(index) { globalKey.currentState!.removeItem(index, (context, animation) { // Get the element to be removed and fade it out var removeItem = _buildItem(index); list.removeAt(index); // Delete data from the array return FadeTransition( // Execute animation opacity: animation, child: removeItem, ); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text("kano")), floatingActionButton: FloatingActionButton( child: const Icon(Icons.add), // This will not work on AnimatedList by directly manipulating the list onPressed: () { // setState(() { // list.add("New data"); // }); /// Use the insertItem method in AnimatedList list.add("New data"); globalKey.currentState!.insertItem(list.length - 1); }, ), // Animated list with animation body: AnimatedList( key: globalKey, initialItemCount: list.length, itemBuilder: (context, index, animation) { // Fade transition opacity enters from 0 to 1 and exits in reverse return FadeTransition(opacity: animation); // Scale transition // return ScaleTransition(scale: animation); }, ), ); } }