animated_list.dart 6.96 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4 5 6 7 8 9
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class AnimatedListSample extends StatefulWidget {
  @override
10
  _AnimatedListSampleState createState() => _AnimatedListSampleState();
11 12 13
}

class _AnimatedListSampleState extends State<AnimatedListSample> {
14
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
15 16 17 18 19 20 21
  ListModel<int> _list;
  int _selectedItem;
  int _nextItem; // The next item inserted when the user presses the '+' button.

  @override
  void initState() {
    super.initState();
22
    _list = ListModel<int>(
23 24 25 26 27 28 29 30 31
      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) {
32
    return CardItem(
33 34 35 36 37 38 39 40 41 42 43 44
      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
45
  // needed because a removed item remains visible until its animation has
46 47 48 49
  // 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) {
50
    return CardItem(
51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
      animation: animation,
      item: item,
      selected: false,
      // No gesture detector here: we don't want removed items to be interactive.
    );
  }

  // 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) {
      _list.removeAt(_list.indexOf(_selectedItem));
      setState(() {
        _selectedItem = null;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
76 77 78
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
79 80
          title: const Text('AnimatedList'),
          actions: <Widget>[
81
            IconButton(
82 83 84 85
              icon: const Icon(Icons.add_circle),
              onPressed: _insert,
              tooltip: 'insert a new item',
            ),
86
            IconButton(
87 88 89 90 91 92
              icon: const Icon(Icons.remove_circle),
              onPressed: _remove,
              tooltip: 'remove the selected item',
            ),
          ],
        ),
93
        body: Padding(
94
          padding: const EdgeInsets.all(16.0),
95
          child: AnimatedList(
96 97 98
            key: _listKey,
            initialItemCount: _list.length,
            itemBuilder: _buildItem,
99
          ),
100
        ),
101
      ),
102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
    );
  }
}

/// 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> {
  ListModel({
    @required this.listKey,
    @required this.removedItemBuilder,
    Iterable<E> initialItems,
120 121
  }) : assert(listKey != null),
       assert(removedItemBuilder != null),
122
       _items = initialItems?.toList() ?? <E>[];
123 124

  final GlobalKey<AnimatedListState> listKey;
125
  final Widget Function(E item, BuildContext context, Animation<double> animation) removedItemBuilder;
126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154
  final List<E> _items;

  AnimatedListState get _animatedList => listKey.currentState;

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

  E removeAt(int index) {
    final E removedItem = _items.removeAt(index);
    if (removedItem != null) {
      _animatedList.removeItem(index, (BuildContext context, Animation<double> animation) {
        return 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 text is displayed in bright green if selected is true.
/// This widget's height is based on the animation parameter, it varies
/// from 0 to 128 as the animation varies from 0.0 to 1.0.
class CardItem extends StatelessWidget {
155
  const CardItem({
156 157 158 159
    Key key,
    @required this.animation,
    this.onTap,
    @required this.item,
160
    this.selected = false,
161 162 163 164
  }) : assert(animation != null),
       assert(item != null && item >= 0),
       assert(selected != null),
       super(key: key);
165 166 167 168 169 170 171 172

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

  @override
  Widget build(BuildContext context) {
173
    TextStyle textStyle = Theme.of(context).textTheme.headline4;
174 175
    if (selected)
      textStyle = textStyle.copyWith(color: Colors.lightGreenAccent[400]);
176
    return Padding(
177
      padding: const EdgeInsets.all(2.0),
178
      child: SizeTransition(
179 180
        axis: Axis.vertical,
        sizeFactor: animation,
181
        child: GestureDetector(
182 183
          behavior: HitTestBehavior.opaque,
          onTap: onTap,
184
          child: SizedBox(
185
            height: 128.0,
186
            child: Card(
187
              color: Colors.primaries[item % Colors.primaries.length],
188 189
              child: Center(
                child: Text('Item $item', style: textStyle),
190 191 192
              ),
            ),
          ),
193 194 195 196 197 198 199
        ),
      ),
    );
  }
}

void main() {
200
  runApp(AnimatedListSample());
201
}
202 203 204 205 206 207

/*
Sample Catalog

Title: AnimatedList

208
Summary: An AnimatedList for displaying a list of cards that stay
209
in sync with an app-specific ListModel. When an item is added to or removed
210
from the model, the corresponding card animates in or out of view.
211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227

Description:
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 `ListModel<E>`, a simple encapsulation of `List<E>`
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.

Classes: AnimatedList, AnimatedListState

Sample: AnimatedListSample

See also:
  - The "Components-Lists: Controls" section of the material design specification:
    <https://material.io/guidelines/components/lists-controls.html#>
*/