AnimatedList

This Article is posted by seven.srikanth at 7/21/2018 6:55:27 AM



<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&lt;E&gt;</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>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](// Copyright 2017 The Chromium Authors. All rights reserved.&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;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&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](// found in the LICENSE file.&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](import 'package:flutter/foundation.dart';&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](import 'package:flutter/material.dart';&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](class AnimatedListSample extends StatefulWidget {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  @override&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  _AnimatedListSampleState createState() =&gt; _AnimatedListSampleState();&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](}&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](class _AnimatedListSampleState extends State&lt;AnimatedListSample&gt; {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  final GlobalKey&lt;AnimatedListState&gt; _listKey = GlobalKey&lt;AnimatedListState&gt;();&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  ListModel&lt;int&gt; _list;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  int _selectedItem;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  int _nextItem; // The next item inserted when the user presses the '+' button.&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  @override&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  void initState() {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    super.initState();&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    _list = ListModel&lt;int&gt;(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      listKey: _listKey,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      initialItems: &lt;int&gt;[0, 1, 2],&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      removedItemBuilder: _buildRemovedItem,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    );&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    _nextItem = 3;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  }&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  // Used to build list items that haven't been removed.&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  Widget _buildItem(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      BuildContext context, int index, Animation&lt;double&gt; animation) {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    return CardItem(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      animation: animation,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      item: _list[index],&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      selected: _selectedItem == _list[index],&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      onTap: () {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        setState(() {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](          _selectedItem = _selectedItem == _list[index] ? null : _list[index];&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        });&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      },&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    );&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  }&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;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&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  // needed because a removed item remains  visible until its animation has&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  // completed (even though it's gone as far this ListModel is concerned).&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  // The widget will be used by the [AnimatedListState.removeItem] method's&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  // [AnimatedListRemovedItemBuilder] parameter.&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  Widget _buildRemovedItem(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      int item, BuildContext context, Animation&lt;double&gt; animation) {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    return CardItem(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      animation: animation,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      item: item,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      selected: false,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      // No gesture detector here: we don't want removed items to be interactive.&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    );&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  }&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  // Insert the &quot;next item&quot; into the list model.&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  void _insert() {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    final int index =&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        _selectedItem == null ? _list.length : _list.indexOf(_selectedItem);&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    _list.insert(index, _nextItem++);&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  }&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  // Remove the selected item from the list model.&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  void _remove() {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    if (_selectedItem != null) {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      _list.removeAt(_list.indexOf(_selectedItem));&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      setState(() {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        _selectedItem = null;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      });&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    }&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  }&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  @override&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  Widget build(BuildContext context) {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    return MaterialApp(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      home: Scaffold(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        appBar: AppBar(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](          title: const Text('AnimatedList'),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](          actions: &lt;Widget&gt;[&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](            IconButton(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](              icon: const Icon(Icons.add_circle),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](              onPressed: _insert,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](              tooltip: 'insert a new item',&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](            ),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](            IconButton(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](              icon: const Icon(Icons.remove_circle),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](              onPressed: _remove,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](              tooltip: 'remove the selected item',&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](            ),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](          ],&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        ),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        body: Padding(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](          padding: const EdgeInsets.all(16.0),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](          child: AnimatedList(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](            key: _listKey,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](            initialItemCount: _list.length,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](            itemBuilder: _buildItem,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](          ),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        ),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      ),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    );&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  }&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](}&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// Keeps a Dart List in sync with an AnimatedList.&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](///&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// The [insert] and [removeAt] methods apply to both the internal list and the&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// animated list that belongs to [listKey].&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](///&lt;/font&gt;</p> <p>&lt;font face=&quot;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&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// sample app. More list methods are easily added, however methods that mutate the&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// list must make the same changes to the animated list in terms of&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// [AnimatedListState.insertItem] and [AnimatedList.removeItem].&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](class ListModel&lt;E&gt; {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  ListModel({&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    @required this.listKey,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    @required this.removedItemBuilder,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    Iterable&lt;E&gt; initialItems,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  })  : assert(listKey != null),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        assert(removedItemBuilder != null),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        _items = List&lt;E&gt;.from(initialItems ?? &lt;E&gt;[]);&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  final GlobalKey&lt;AnimatedListState&gt; listKey;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  final dynamic removedItemBuilder;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  final List&lt;E&gt; _items;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  AnimatedListState get _animatedList =&gt; listKey.currentState;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  void insert(int index, E item) {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    _items.insert(index, item);&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    _animatedList.insertItem(index);&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  }&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  E removeAt(int index) {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    final E removedItem = _items.removeAt(index);&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    if (removedItem != null) {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      _animatedList.removeItem(index,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](          (BuildContext context, Animation&lt;double&gt; animation) {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        return removedItemBuilder(removedItem, context, animation);&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      });&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    }&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    return removedItem;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  }&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  int get length =&gt; _items.length;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  E operator [](int index) =&gt; _items[index];&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  int indexOf(E item) =&gt; _items.indexOf(item);&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](}&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;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&lt;/font&gt;</p> <p>&lt;font face=&quot;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.&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// This widget's height is based on the animation parameter, it varies&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](/// from 0 to 128 as the animation varies from 0.0 to 1.0.&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](class CardItem extends StatelessWidget {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  const CardItem(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      {Key key,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      @required this.animation,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      this.onTap,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      @required this.item,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      this.selected: false})&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      : assert(animation != null),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        assert(item != null &amp;&amp; item &gt;= 0),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        assert(selected != null),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        super(key: key);&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  final Animation&lt;double&gt; animation;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  final VoidCallback onTap;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  final int item;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  final bool selected;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  @override&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  Widget build(BuildContext context) {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    TextStyle textStyle = Theme.of(context).textTheme.display1;&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    if (selected)&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      textStyle = textStyle.copyWith(color: Colors.lightGreenAccent[400]);&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    return Padding(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      padding: const EdgeInsets.all(2.0),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      child: SizeTransition(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        axis: Axis.vertical,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        sizeFactor: animation,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        child: GestureDetector(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](          behavior: HitTestBehavior.opaque,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](          onTap: onTap,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](          child: SizedBox(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](            height: 128.0,&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](            child: Card(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](              color: Colors.primaries[item % Colors.primaries.length],&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](              child: Center(&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](                child: Text('Item $item', style: textStyle),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](              ),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](            ),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](          ),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](        ),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](      ),&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](    );&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  }&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](}&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace]( &lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](void main() {&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](  runApp(AnimatedListSample());&lt;/font&gt;</p> <p>&lt;font face=&quot;SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace](}&lt;/font&gt;</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>


Tags: AnimatedList








0 Comments
Login to comment.
Recent Comments