Flutter: how can I show animation when I sort the list elements?

Viewed 103

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?

0 Answers
Related