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.

{@tool dartpad} This sample application uses an AnimatedList.separated to create an effect when items are removed or added to the list.

** See code in examples/api/lib/widgets/animated_list/animated_list_separated.0.dart ** {@end-tool}

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.

{@tool snippet} The following example demonstrates how to override the default top and bottom padding using MediaQuery.removePadding.

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();
      }
    ),
  );
}

{@end-tool}

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);
       },
     );