<p>An AnimatedList that displays a list of cards which stay in sync with an app-specific ListModel. When an item is added to or removed from the model, the corresponding card animates in or out of view. <div class="container-fluid" style="height: auto !important;]( <div class="row]( <div class="col-md-4]( <div class="panel panel-default]( <div class="panel-body" style="padding: 16px 32px;]( <img style="border:1px solid #000000" src="https://storage.googleapis.com/flutter-catalog/cb4a54db8fb3726bf4293b9cc5cb12ce16883803/animated_list_small.png "Android screenshot" class="img-responsive](</p> <pre> <div class="panel-footer](Android screenshot
</pre>
<p><div class="google-auto-placed" style="width: 100%; height: auto; clear: both; text-align: center;](
<ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-9799612439562237" data-adsbygoogle-status="done" style="display: block; margin: 10px auto; background-color: transparent; height: 0px;](
<ins id="aswift_3_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 554px; background-color: transparent;](
<ins id="aswift_3_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 554px; background-color: transparent; overflow: hidden; opacity: 0;](
<iframe id="aswift_3" name="aswift_3" style="left:0;position:absolute;top:0;border:0;width:554px;height:280px;" sandbox="allow-forms allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" width="554" height="280" frameborder="0" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-9799612439562237&output=html&h=280&adk=3879281724&adf=2198913656&w=554&fwrn=4&fwrnh=100&lmt=1590674693&rafmt=1&to=qs&pwprc=8672468290&psa=1&guci=2.2.0.0.2.2.0.0&format=554x280&url=https%3A%2F%2Ffluttercentral.com%2FArticles%2FEdit%2F9&flash=0&fwr=0&rpe=1&resp_fmts=3&wgl=1&adsid=NT&dt=1590674693769&bpp=4&bdt=1290&idt=4&shv=r20200526&cbv=r20190131&ptt=9&saldr=aa&abxe=1&cookie=ID%3D523ebc603a72062a%3AT%3D1590694372%3AS%3DALNI_MY7afIkSpd4JJSM_bDdVhQ7IZrz_Q&crv=1&prev_fmts=1200x280%2C1200x280%2C0x0&nras=1&correlator=7993391593441&frm=20&pv=1&ga_vid=1735767519.1590674570&ga_sid=1590674570&ga_hid=577777627&ga_fc=1&ga_wpids=UA-131120684-6&iag=0&icsg=36507462626&dssz=44&mdo=0&mso=0&u_tz=330&u_his=12&u_java=0&u_h=768&u_w=1366&u_ah=728&u_aw=1366&u_cd=24&u_nplug=3&u_nmime=4&adx=398&ady=1306&biw=1349&bih=640&scr_x=0&scr_y=0&eid=21066085%2C182982000%2C182982200&oid=3&pvsid=3772930701997039&pem=251&ref=https%3A%2F%2Ffluttercentral.com%2FArticles%2FPost%2F9%2FAnimatedList&rx=0&eae=0&fc=896&brdim=0%2C0%2C0%2C0%2C1366%2C0%2C1366%2C728%2C1366%2C657&vis=1&rsz=%7C%7CpeEbr%7C&abl=CS&pfx=0&fu=9360&bc=31&ifi=3&uci=a!3&btvi=2&fsb=1&xpc=5M3nao93B6&p=https%3A//fluttercentral.com&dtd=84" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" data-google-container-id="a!3" data-google-query-id="CNjkouKm1-kCFctAnQkdQXAAfw" data-load-complete="true" class="ezfound](
</iframe>
</ins>
</ins>
</ins></p>
<p>Tap an item to select it, tap it again to unselect. Tap ‘+’ to insert at the selected item, ‘-‘ to remove the selected item. The tap handlers add or remove items from a <code class="highlighter-rouge](ListModel<E><code>, a simple encapsulation of <code class="highlighter-rouge](List<E></code> that keeps the AnimatedList in sync. The list model has a GlobalKey for its animated list. It uses the key to call the insertItem and removeItem methods defined by AnimatedListState.</p>
<p>Try this app out by creating a new project with <code class="highlighter-rouge](flutter create<code> and replacing the contents of <code class="highlighter-rouge](lib/main.dart</code> with the code that follows.
<pre class="codestyle](
</p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](// Copyright 2017 The Chromium Authors. All rights reserved.</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](// Use of this source code is governed by a BSD-style license that can be</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](// found in the LICENSE file.</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](import 'package:flutter/foundation.dart';</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](import 'package:flutter/material.dart';</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](class AnimatedListSample extends StatefulWidget {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( @override</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( _AnimatedListSampleState createState() => _AnimatedListSampleState();</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](}</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](class _AnimatedListSampleState extends State<AnimatedListSample> {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ListModel<int> _list;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( int _selectedItem;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( int _nextItem; // The next item inserted when the user presses the '+' button.</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( @override</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( void initState() {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( super.initState();</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( _list = ListModel<int>(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( listKey: _listKey,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( initialItems: <int>[0, 1, 2],</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( removedItemBuilder: _buildRemovedItem,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( );</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( _nextItem = 3;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( }</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( // Used to build list items that haven't been removed.</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( Widget _buildItem(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( BuildContext context, int index, Animation<double> animation) {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( return CardItem(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( animation: animation,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( item: _list[index],</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( selected: _selectedItem == _list[index],</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( onTap: () {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( setState(() {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( _selectedItem = _selectedItem == _list[index] ? null : _list[index];</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( });</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( },</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( );</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( }</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( // Used to build an item after it has been removed from the list. This method is</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( // needed because a removed item remains visible until its animation has</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( // completed (even though it's gone as far this ListModel is concerned).</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( // The widget will be used by the [AnimatedListState.removeItem] method's</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( // [AnimatedListRemovedItemBuilder] parameter.</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( Widget _buildRemovedItem(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( int item, BuildContext context, Animation<double> animation) {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( return CardItem(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( animation: animation,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( item: item,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( selected: false,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( // No gesture detector here: we don't want removed items to be interactive.</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( );</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( }</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( // Insert the "next item" into the list model.</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( void _insert() {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( final int index =</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( _selectedItem == null ? _list.length : _list.indexOf(_selectedItem);</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( _list.insert(index, _nextItem++);</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( }</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( // Remove the selected item from the list model.</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( void _remove() {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( if (_selectedItem != null) {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( _list.removeAt(_list.indexOf(_selectedItem));</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( setState(() {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( _selectedItem = null;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( });</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( }</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( }</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( @override</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( Widget build(BuildContext context) {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( return MaterialApp(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( home: Scaffold(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( appBar: AppBar(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( title: const Text('AnimatedList'),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( actions: <Widget>[</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( IconButton(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( icon: const Icon(Icons.add_circle),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( onPressed: _insert,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( tooltip: 'insert a new item',</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( IconButton(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( icon: const Icon(Icons.remove_circle),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( onPressed: _remove,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( tooltip: 'remove the selected item',</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ],</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( body: Padding(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( padding: const EdgeInsets.all(16.0),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( child: AnimatedList(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( key: _listKey,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( initialItemCount: _list.length,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( itemBuilder: _buildItem,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( );</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( }</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](}</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// Keeps a Dart List in sync with an AnimatedList.</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](///</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// The [insert] and [removeAt] methods apply to both the internal list and the</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// animated list that belongs to [listKey].</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](///</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// This class only exposes as much of the Dart List API as is needed by the</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// sample app. More list methods are easily added, however methods that mutate the</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// list must make the same changes to the animated list in terms of</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// [AnimatedListState.insertItem] and [AnimatedList.removeItem].</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](class ListModel<E> {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ListModel({</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( @required this.listKey,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( @required this.removedItemBuilder,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( Iterable<E> initialItems,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( }) : assert(listKey != null),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( assert(removedItemBuilder != null),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( _items = List<E>.from(initialItems ?? <E>[]);</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( final GlobalKey<AnimatedListState> listKey;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( final dynamic removedItemBuilder;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( final List<E> _items;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( AnimatedListState get _animatedList => listKey.currentState;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( void insert(int index, E item) {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( _items.insert(index, item);</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( _animatedList.insertItem(index);</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( }</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( E removeAt(int index) {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( final E removedItem = _items.removeAt(index);</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( if (removedItem != null) {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( _animatedList.removeItem(index,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( (BuildContext context, Animation<double> animation) {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( return removedItemBuilder(removedItem, context, animation);</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( });</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( }</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( return removedItem;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( }</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( int get length => _items.length;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( E operator [](int index) => _items[index];</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( int indexOf(E item) => _items.indexOf(item);</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](}</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// Displays its integer item as 'item N' on a Card whose color is based on</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// the item's value. The text is displayed in bright green if selected is true.</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// This widget's height is based on the animation parameter, it varies</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// from 0 to 128 as the animation varies from 0.0 to 1.0.</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](class CardItem extends StatelessWidget {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( const CardItem(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( {Key key,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( @required this.animation,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( this.onTap,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( @required this.item,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( this.selected: false})</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( : assert(animation != null),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( assert(item != null && item >= 0),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( assert(selected != null),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( super(key: key);</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( final Animation<double> animation;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( final VoidCallback onTap;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( final int item;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( final bool selected;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( @override</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( Widget build(BuildContext context) {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( TextStyle textStyle = Theme.of(context).textTheme.display1;</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( if (selected)</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( textStyle = textStyle.copyWith(color: Colors.lightGreenAccent[400]);</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( return Padding(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( padding: const EdgeInsets.all(2.0),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( child: SizeTransition(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( axis: Axis.vertical,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( sizeFactor: animation,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( child: GestureDetector(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( behavior: HitTestBehavior.opaque,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( onTap: onTap,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( child: SizedBox(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( height: 128.0,</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( child: Card(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( color: Colors.primaries[item % Colors.primaries.length],</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( child: Center(</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( child: Text('Item $item', style: textStyle),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( ),</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( );</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( }</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](}</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( </font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](void main() {</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( runApp(AnimatedListSample());</font></p> <p><font face="SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](}</font></p> <p>
</pre></p>
<h2 id="section"></h2>
<p><span style="font-size: 2rem;](See also:</p>
<ul>
<li><p>The “Components-Lists: Controls” section of the Material Design specification: <a href="https://material.io/guidelines/components/lists-controls.html#">https://material.io/guidelines/components/lists-controls.html#</a></p>
</li>
<li><p>The source code in <a href="examples/catalog/lib/animated_list.dart">https://github.com/flutter/flutter/blob/master/examples/catalog/lib/animated_list.dart</a>.</p>
</li>
</ul>
<p>Credits: This article was initially posted in Flutter.io.</p>