Как использовать AnimatedList Widget во Flutter
Я видел это видео на YouTube
и я пытаюсь реализовать анимированный список,
но я не очень знаком с анимацией.
Что я должен вставить как
position: animation.drive(),
а также
removeItem(_index,(context,animation)=> /// что я должен здесь делать),);
вот код (всего несколько изменений по сравнению с "запуском приложения")
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
List<int> _list = [];
final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
void _addItem() {
final int _index = _list.length;
_list.insert(_index,_index);
_listKey.currentState.insertItem(_index);
}
void _removeItem() {
final int _index = _list.length-1;
_listKey.currentState.removeItem(_index,(context,animation)=> /// what I'm supposed to do here
),);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: AnimatedList(
key: _listKey,
initialItemCount: 0,
itemBuilder: (BuildContext context, int index, Animation animation) {
return SlideTransition(
position: animation.drive(
/// what I'm supposed to do here
),
child: Card(child: Text(_list[index].toString()),));
},),
),
floatingActionButton: Column(children: <Widget>[
FloatingActionButton(
onPressed:()=> _addItem(),
tooltip: 'Increment',
child: Icon(Icons.add),),
FloatingActionButton(
onPressed: ()=>_removeItem(),
tooltip: 'Decrement',
child: Icon(Icons.remove),),
],),
);
}
}
Оглядываясь на учебник по SliderTransition я вижу это:
SlideTransition(
position: Tween<Offset>(
begin: const Offset(-1, 0),
end: Offset.zero,
).animate(animation),
пока у меня есть это:
SlideTransition(
position: animation.drive(
// what i supposed to go here ??
),
кто-нибудь может помочь?
это только эта недостающая часть или я пропускаю что-то еще?
заранее спасибо
[edit: страница AnimatedList показывает сообщение
Эта страница устарела, и ее содержание может быть устаревшим.
на самом деле, кажется, не использует этот виджет вообще]
1 ответ
Решение
Я нашел ответ на свой вопрос здесь
Вы можете найти мой код -> ЗДЕСЬ <-
и ниже
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
List<int> _list = [];
final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
void _addItem() {
final int _index = _list.length;
_list.insert(_index,_index);
_listKey.currentState.insertItem(_index);
}
void _removeItem() {
final int _index = _list.length-1;
_listKey.currentState.removeItem(_index,(context,animation)=> Container()); /// what I'm supposed to do here
_list.removeAt(_index);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: AnimatedList(
key: _listKey,
initialItemCount: 0,
itemBuilder: (BuildContext context, int index, Animation animation) {
return _buildItem(_list[index].toString(),animation);
},),
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
onPressed:()=> _addItem(),
tooltip: 'Increment',
child: Icon(Icons.add),),
FloatingActionButton(
onPressed: ()=>_removeItem(),
tooltip: 'Decrement',
child: Icon(Icons.remove),),
],),
],),
);
}
Widget _buildItem(String _item, Animation _animation) {
return SizeTransition(
sizeFactor: _animation,
child: Card(
child: ListTile(
title: Text(
_item,
),
),
),
);
}
}