Created
July 25, 2018 00:55
-
-
Save manujbahl/c53e3bc9c263b9aeb5a1cf8444d12beb to your computer and use it in GitHub Desktop.
Animated List
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:flutter/foundation.dart'; | |
main() { | |
runApp(new TestSample()); | |
} | |
class TestSample extends StatelessWidget{ | |
@override | |
Widget build(BuildContext context) { | |
var widget = new MaterialApp( | |
home: new Scaffold( | |
body: new Center( | |
child: new AnimatedListDemo(), | |
) | |
), | |
); | |
return widget; | |
} | |
} | |
class AnimatedListDemo extends StatefulWidget { | |
@override | |
_AnimatedListDemoState createState() => new _AnimatedListDemoState(); | |
} | |
class _AnimatedListDemoState extends State<AnimatedListDemo> with TickerProviderStateMixin { | |
int numPresses; | |
@override | |
void initState() { | |
numPresses = 0; | |
super.initState(); | |
} | |
Widget build(BuildContext context) { | |
return new Center( | |
child: new Column( | |
mainAxisAlignment: MainAxisAlignment.center, | |
crossAxisAlignment: CrossAxisAlignment.center, | |
children: [ | |
new FlatButton( | |
child: new Text("Press Me - " + numPresses.toString()), | |
onPressed: () { | |
setState(() { | |
numPresses++; | |
}); | |
}, | |
), | |
new Container( | |
child: new AnimatedListSample(), | |
height: 300.0 | |
), | |
] | |
) | |
); | |
} | |
} | |
class AnimatedListSample extends StatelessWidget{ | |
final GlobalKey<AnimatedListState> _listKey = new GlobalKey<AnimatedListState>(); | |
ListModel<int> _list; | |
AnimatedListSample() { | |
_list = new ListModel<int>( | |
listKey: _listKey, | |
initialItems: <int>[0, 1, 2], | |
removedItemBuilder: _buildRemovedItem, | |
); | |
} | |
Widget _buildItem(BuildContext context, int index, Animation<double> animation) { | |
TextStyle textStyle = Theme.of(context).textTheme.display1; | |
return new Container( | |
color: Colors.primaries[index % Colors.primaries.length], | |
height: 100.0, | |
width: 350.0, | |
child: new Center( child: Text(index.toString(), style: textStyle,) ) | |
); | |
} | |
Widget _buildRemovedItem(int item, BuildContext context, Animation<double> animation) { | |
return _buildItem(context, item, animation); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return new AnimatedList( | |
scrollDirection: Axis.vertical, | |
key: _listKey, | |
initialItemCount: _list.length, | |
itemBuilder: _buildItem, | |
); | |
} | |
} | |
class ListModel<E> { | |
ListModel({ | |
@required this.listKey, | |
@required this.removedItemBuilder, | |
Iterable<E> initialItems, | |
}) : assert(listKey != null), | |
assert(removedItemBuilder != null), | |
_items = new List<E>.from(initialItems ?? <E>[]); | |
final GlobalKey<AnimatedListState> listKey; | |
final dynamic removedItemBuilder; | |
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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment