I'm building a small AnimatedList demo where user can add/remove/sort the list but I'm stuck at the sorting part. when use the sort function to sort the list it does sort short the list and changes UI but doesn't show the animation.
this is the code,
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
final _key = GlobalKey<FormState>();
final listKey = GlobalKey<AnimatedListState>();
List<String> text = ['banana', 'apple', 'peach', 'mangoes', 'adsd'];
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: tapAnywhere,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green[400],
title: Text('Animated List Demo'),
actions: [
IconButton(
icon: Icon(Icons.sort),
onPressed: () {
listKey.currentState.setState(() {
text = List.from(text) //<---sorting the list
..sort();
});
},
)
],
),
body: Form(
key: _key,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [
(other code...),
AnimatedList( //<--animated list
key: listKey,
initialItemCount: text.length,
shrinkWrap: true,
physics: ScrollPhysics(),
itemBuilder: (context, index, animation) {
return GestureDetector(
onTap: () => removeElement(index),
child: TextCard(
animation: animation,
text: text.elementAt(index),
),
);
}),
],
),
),
),
),
);
}
}
How can I fix these?