AnimatedList.separated constructor

AnimatedList.separated({
  1. Key? key,
  2. required AnimatedItemBuilder itemBuilder,
  3. required AnimatedItemBuilder separatorBuilder,
  4. required AnimatedItemBuilder removedSeparatorBuilder,
  5. int initialItemCount = 0,
  6. Axis scrollDirection = Axis.vertical,
  7. bool reverse = false,
  8. ScrollController? controller,
  9. bool? primary,
  10. ScrollPhysics? physics,
  11. bool shrinkWrap = false,
  12. EdgeInsetsGeometry? padding,
  13. Clip clipBehavior = Clip.hardEdge,
})

A scrolling container that animates items with separators when they are inserted or removed.

This widget's AnimatedListState can be used to dynamically insert or remove items. To refer to the AnimatedListState either provide a GlobalKey or use the static of method from an item's input callback.

This widget is similar to one created by ListView.separated.

This sample application uses an AnimatedList.separated to create an effect when items are removed or added to the list.
link

To create a local project with this code sample, run:
flutter create --sample=widgets.AnimatedList.AnimatedList.separated.1 mysample

By default, AnimatedList.separated will automatically pad the limits of the list's scrollable to avoid partial obstructions indicated by MediaQuery's padding. To avoid this behavior, override with a zero padding property.

The following example demonstrates how to override the default top and bottom padding using MediaQuery.removePadding.
link 
Widget myWidget(BuildContext context) {
  return MediaQuery.removePadding(
    context: context,
    removeTop: true,
    removeBottom: true,
    child: AnimatedList.separated(
      initialItemCount: 50,
      itemBuilder: (BuildContext context, int index, Animation<double> animation) {
        return Card(
          color: Colors.amber,
          child: Center(child: Text('$index')),
        );
      },
      separatorBuilder: (BuildContext context, int index, Animation<double> animation) {
        return const Divider();
      },
      removedSeparatorBuilder: (BuildContext context, int index, Animation<double> animation) {
        return const Divider();
      }
    ),
  );
}

See also:

  • SliverAnimatedList, a sliver that animates items when they are inserted or removed from a list.
  • SliverAnimatedGrid, a sliver which animates items when they are inserted or removed from a grid.
  • AnimatedGrid, a non-sliver scrolling container that animates items when they are inserted or removed in a grid.
  • AnimatedList, which animates items added and removed from a list instead of a grid.

Implementation

AnimatedList.separated({
  super.key,
  required AnimatedItemBuilder itemBuilder,
  required AnimatedItemBuilder separatorBuilder,
  required AnimatedItemBuilder super.removedSeparatorBuilder,
  int initialItemCount = 0,
  super.scrollDirection = Axis.vertical,
  super.reverse = false,
  super.controller,
  super.primary,
  super.physics,
  super.shrinkWrap = false,
  super.padding,
  super.clipBehavior = Clip.hardEdge,
}) : assert(initialItemCount >= 0),
     super(
       initialItemCount: _computeChildCountWithSeparators(initialItemCount),
       itemBuilder: (BuildContext context, int index, Animation<double> animation) {
         final int itemIndex = index ~/ 2;
         if (index.isEven) {
           return itemBuilder(context, itemIndex, animation);
         }
         return separatorBuilder(context, itemIndex, animation);
       },
     );