AnimatedList显示与ListModel保持同步的卡片列表。当新的item被添加到ListModel或从ListModel中删除时，相应的卡片在UI上也会被添加或删除，并伴有动画效果。

    Android screenshot
    Android 截图

    点击一个item选择它，再次点击它会取消选择。点击’+’插入选定的item，点击’ - ‘删除选定的item。 tap处理器会从ListModel<E>中添加或删除items，ListModel<E>是List<E>的简单封装 ，用于保持和AnimatedList的同步。 列表模型为其动画列表提供了一个GlobalKey。它使用该键来调用由AnimatedListState定义的insertItem和removeItem方法。

    通过flutter create命令创建一个新项目，并用下面的代码替换lib/main.dart的内容来尝试运行一下。

    1. // Copyright 2017 The Chromium Authors. All rights reserved.
    2. // Use of this source code is governed by a BSD-style license that can be
    3. // found in the LICENSE file.
    5. import 'package:flutter/foundation.dart';
    6. import 'package:flutter/material.dart';
    8. class AnimatedListSample extends StatefulWidget {
    9.   @override
    10.   _AnimatedListSampleState createState() => new _AnimatedListSampleState();
    11. }
    13. class _AnimatedListSampleState extends State<AnimatedListSample> {
    14.   final GlobalKey<AnimatedListState> _listKey = new GlobalKey<AnimatedListState>();
    15.   ListModel<int> _list;
    16.   int _selectedItem;
    17.   int _nextItem; // The next item inserted when the user presses the '+' button.
    19.   @override
    20.   void initState() {
    21.     super.initState();
    22.     _list = new ListModel<int>(
    23.       listKey: _listKey,
    24.       initialItems: <int>[0, 1, 2],
    25.       removedItemBuilder: _buildRemovedItem,
    26.     );
    27.     _nextItem = 3;
    28.   }
    30.   // Used to build list items that haven't been removed.
    31.   Widget _buildItem(BuildContext context, int index, Animation<double> animation) {
    32.     return new CardItem(
    33.       animation: animation,
    34.       item: _list[index],
    35.       selected: _selectedItem == _list[index],
    36.       onTap: () {
    37.         setState(() {
    38.           _selectedItem = _selectedItem == _list[index] ? null : _list[index];
    39.         });
    40.       },
    41.     );
    42.   }
    44.   // Used to build an item after it has been removed from the list. This method is
    45.   // needed because a removed item remains  visible until its animation has
    46.   // completed (even though it's gone as far this ListModel is concerned).
    47.   // The widget will be used by the [AnimatedListState.removeItem] method's
    48.   // [AnimatedListRemovedItemBuilder] parameter.
    49.   Widget _buildRemovedItem(int item, BuildContext context, Animation<double> animation) {
    50.     return new CardItem(
    51.       animation: animation,
    52.       item: item,
    53.       selected: false,
    54.       // No gesture detector here: we don't want removed items to be interactive.
    55.     );
    56.   }
    58.   // Insert the "next item" into the list model.
    59.   void _insert() {
    60.     final int index = _selectedItem == null ? _list.length : _list.indexOf(_selectedItem);
    61.     _list.insert(index, _nextItem++);
    62.   }
    64.   // Remove the selected item from the list model.
    65.   void _remove() {
    66.     if (_selectedItem != null) {
    67.       _list.removeAt(_list.indexOf(_selectedItem));
    68.       setState(() {
    69.         _selectedItem = null;
    70.       });
    71.     }
    72.   }
    74.   @override
    75.   Widget build(BuildContext context) {
    76.     return new MaterialApp(
    77.       home: new Scaffold(
    78.         appBar: new AppBar(
    79.           title: const Text('AnimatedList'),
    80.           actions: <Widget>[
    81.             new IconButton(
    82.               icon: const Icon(Icons.add_circle),
    83.               onPressed: _insert,
    84.               tooltip: 'insert a new item',
    85.             ),
    86.             new IconButton(
    87.               icon: const Icon(Icons.remove_circle),
    88.               onPressed: _remove,
    89.               tooltip: 'remove the selected item',
    90.             ),
    91.           ],
    92.         ),
    93.         body: new Padding(
    94.           padding: const EdgeInsets.all(16.0),
    95.           child: new AnimatedList(
    96.             key: _listKey,
    97.             initialItemCount: _list.length,
    98.             itemBuilder: _buildItem,
    99.           ),
    100.         ),
    101.       ),
    102.     );
    103.   }
    104. }
    106. /// Keeps a Dart List in sync with an AnimatedList.
    107. ///
    108. /// The [insert] and [removeAt] methods apply to both the internal list and the
    109. /// animated list that belongs to [listKey].
    110. ///
    111. /// This class only exposes as much of the Dart List API as is needed by the
    112. /// sample app. More list methods are easily added, however methods that mutate the
    113. /// list must make the same changes to the animated list in terms of
    114. /// [AnimatedListState.insertItem] and [AnimatedList.removeItem].
    115. class ListModel<E> {
    116.   ListModel({
    117.     @required this.listKey,
    118.     @required this.removedItemBuilder,
    119.     Iterable<E> initialItems,
    120.   }) : assert(listKey != null),
    121.        assert(removedItemBuilder != null),
    122.        _items = new List<E>.from(initialItems ?? <E>[]);
    124.   final GlobalKey<AnimatedListState> listKey;
    125.   final dynamic removedItemBuilder;
    126.   final List<E> _items;
    128.   AnimatedListState get _animatedList => listKey.currentState;
    130.   void insert(int index, E item) {
    131.     _items.insert(index, item);
    132.     _animatedList.insertItem(index);
    133.   }
    135.   E removeAt(int index) {
    136.     final E removedItem = _items.removeAt(index);
    137.     if (removedItem != null) {
    138.       _animatedList.removeItem(index, (BuildContext context, Animation<double> animation) {
    139.         return removedItemBuilder(removedItem, context, animation);
    140.       });
    141.     }
    142.     return removedItem;
    143.   }
    145.   int get length => _items.length;
    146.   E operator [](int index) => _items[index];
    147.   int indexOf(E item) => _items.indexOf(item);
    148. }
    150. /// Displays its integer item as 'item N' on a Card whose color is based on
    151. /// the item's value. The text is displayed in bright green if selected is true.
    152. /// This widget's height is based on the animation parameter, it varies
    153. /// from 0 to 128 as the animation varies from 0.0 to 1.0.
    154. class CardItem extends StatelessWidget {
    155.   const CardItem({
    156.     Key key,
    157.     @required this.animation,
    158.     this.onTap,
    159.     @required this.item,
    160.     this.selected: false
    161.   }) : assert(animation != null),
    162.        assert(item != null && item >= 0),
    163.        assert(selected != null),
    164.        super(key: key);
    166.   final Animation<double> animation;
    167.   final VoidCallback onTap;
    168.   final int item;
    169.   final bool selected;
    171.   @override
    172.   Widget build(BuildContext context) {
    173.     TextStyle textStyle = Theme.of(context).textTheme.display1;
    174.     if (selected)
    175.       textStyle = textStyle.copyWith(color: Colors.lightGreenAccent[400]);
    176.     return new Padding(
    177.       padding: const EdgeInsets.all(2.0),
    178.       child: new SizeTransition(
    179.         axis: Axis.vertical,
    180.         sizeFactor: animation,
    181.         child: new GestureDetector(
    182.           behavior: HitTestBehavior.opaque,
    183.           onTap: onTap,
    184.           child: new SizedBox(
    185.             height: 128.0,
    186.             child: new Card(
    187.               color: Colors.primaries[item % Colors.primaries.length],
    188.               child: new Center(
    189.                 child: new Text('Item $item', style: textStyle),
    190.               ),
    191.             ),
    192.           ),
    193.         ),
    194.       ),
    195.     );
    196.   }
    197. }
    199. void main() {
    200.   runApp(new AnimatedListSample());
    201. }

    也可以参考: