SliverAnimatedList class

A sliver that animates items when they are inserted or removed.

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

This sample application uses a SliverAnimatedList to create an animated effect when items are removed or added to the list.
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

// ...

void main() => runApp(SliverAnimatedListSample());

class SliverAnimatedListSample extends StatefulWidget {
  _SliverAnimatedListSampleState createState() => _SliverAnimatedListSampleState();

class _SliverAnimatedListSampleState extends State<SliverAnimatedListSample> {
  final GlobalKey<SliverAnimatedListState> _listKey = GlobalKey<SliverAnimatedListState>();
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  ListModel<int> _list;
  int _selectedItem;
  int _nextItem; // The next item inserted when the user presses the '+' button.

  void initState() {
    _list = ListModel<int>(
      listKey: _listKey,
      initialItems: <int>[0, 1, 2],
      removedItemBuilder: _buildRemovedItem,
    _nextItem = 3;

  // Used to build list items that haven't been removed.
  Widget _buildItem(BuildContext context, int index, Animation<double> animation) {
    return CardItem(
      animation: animation,
      item: _list[index],
      selected: _selectedItem == _list[index],
      onTap: () {
        setState(() {
          _selectedItem = _selectedItem == _list[index] ? null : _list[index];

  // Used to build an item after it has been removed from the list. This
  // method is needed because a removed item remains visible until its
  // animation has completed (even though it's gone as far this ListModel is
  // concerned). The widget will be used by the
  // [AnimatedListState.removeItem] method's
  // [AnimatedListRemovedItemBuilder] parameter.
  Widget _buildRemovedItem(int item, BuildContext context, Animation<double> animation) {
    return CardItem(
      animation: animation,
      item: item,
      selected: false,

  // Insert the "next item" into the list model.
  void _insert() {
    final int index = _selectedItem == null ? _list.length : _list.indexOf(_selectedItem);
    _list.insert(index, _nextItem++);

  // Remove the selected item from the list model.
  void _remove() {
    if (_selectedItem != null) {
      setState(() {
        _selectedItem = null;
    } else {
        content: Text(
          'Select an item to remove from the list.',
          style: TextStyle(fontSize: 20),

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        key: _scaffoldKey,
        body: CustomScrollView(
          slivers: <Widget>[
              title: Text(
                style: TextStyle(fontSize: 30),
              expandedHeight: 100,
              centerTitle: true,
              backgroundColor: Colors.amber[900],
              leading: IconButton(
                icon: const Icon(Icons.add_circle),
                onPressed: _insert,
                tooltip: 'Insert a new item.',
                iconSize: 48,
              actions: [
                  icon: const Icon(Icons.remove_circle),
                  onPressed: _remove,
                  tooltip: 'Remove the selected item.',
                  iconSize: 48,
              key: _listKey,
              initialItemCount: _list.length,
              itemBuilder: _buildItem,

// Keeps a Dart [List] in sync with an [AnimatedList].
// The [insert] and [removeAt] methods apply to both the internal list and
// the animated list that belongs to [listKey].
// This class only exposes as much of the Dart List API as is needed by the
// sample app. More list methods are easily added, however methods that
// mutate the list must make the same changes to the animated list in terms
// of [AnimatedListState.insertItem] and [AnimatedList.removeItem].
class ListModel<E> {
    @required this.listKey,
    @required this.removedItemBuilder,
    Iterable<E> initialItems,
  }) : assert(listKey != null),
       assert(removedItemBuilder != null),
       _items = List<E>.from(initialItems ?? <E>[]);

  final GlobalKey<SliverAnimatedListState> listKey;
  final dynamic removedItemBuilder;
  final List<E> _items;

  SliverAnimatedListState get _animatedList => listKey.currentState;

  void insert(int index, E item) {
    _items.insert(index, item);

  E removeAt(int index) {
    final E removedItem = _items.removeAt(index);
    if (removedItem != null) {
        (BuildContext context, Animation<double> animation) => removedItemBuilder(removedItem, context, animation),
    return removedItem;

  int get length => _items.length;

  E operator [](int index) => _items[index];

  int indexOf(E item) => _items.indexOf(item);

// Displays its integer item as 'Item N' on a Card whose color is based on
// the item's value.
// The card turns gray when [selected] is true. This widget's height
// is based on the [animation] parameter. It varies as the animation value
// transitions from 0.0 to 1.0.
class CardItem extends StatelessWidget {
  const CardItem({
    Key key,
    @required this.animation,
    @required this.item,
    this.selected = false,
  }) : assert(animation != null),
       assert(item != null && item >= 0),
       assert(selected != null),
       super(key: key);

  final Animation<double> animation;
  final VoidCallback onTap;
  final int item;
  final bool selected;

  Widget build(BuildContext context) {
    return Padding(
      const EdgeInsets.only(
        left: 2.0,
        right: 2.0,
        top: 2.0,
        bottom: 0.0,
      child: SizeTransition(
        axis: Axis.vertical,
        sizeFactor: animation,
        child: GestureDetector(
          onTap: onTap,
          child: SizedBox(
            height: 120.0,
            child: Card(
              color: selected
                ? Colors.black12
                : Colors.primaries[item % Colors.primaries.length],
              child: Center(
                child: Text(
                  'Item $item',
                  style: Theme.of(context).textTheme.display1,

See also:

  • SliverList, which does not animate items when they are inserted or removed.
  • AnimatedList, a non-sliver scrolling container that animates items when they are inserted or removed.


SliverAnimatedList({Key key, @required AnimatedListItemBuilder itemBuilder, int initialItemCount: 0})
Creates a sliver that animates items when they are inserted or removed.


initialItemCount int
The number of items the list will start with. [...]
itemBuilder AnimatedListItemBuilder
Called, as needed, to build list item widgets. [...]
hashCode int
The hash code for this object. [...]
read-only, inherited
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited


createState() SliverAnimatedListState
Creates the mutable state for this widget at a given location in the tree. [...]
createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
toDiagnosticsNode({String name, DiagnosticsTreeStyle style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug}) String
Returns a string representation of this object.
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants.
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object.
toStringShort() String
A short, textual description of this widget.


operator ==(dynamic other) bool
The equality operator. [...]

Static Methods

of(BuildContext context, {bool nullOk: false}) SliverAnimatedListState
The state from the closest instance of this class that encloses the given context. [...]