Comment utiliser le widget AnimatedList dans Flutter ?

Question

J'ai vu ça vidéo sur youtube

et j'essaie d'implémenter une liste animée,

mais je ne suis pas vraiment familier avec les animations.

Ce que je suis censé insérer comme

position : animation.drive(),

et

removeItem(_index,(context,animation)=> /// ce que je suis censé faire ici ),) ;

voici le code (juste quelques changements par rapport à l'application de départ)

      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),),
      ],), 
    );
  }
}

En cherchant un tutoriel sur SliderTransition, je vois ceci :

SlideTransition(
                position: Tween<Offset>(
                  begin: const Offset(-1, 0),
                  end: Offset.zero,
                ).animate(animation),

alors que j'ai ceci :

 SlideTransition(
                  position: animation.drive(
                      // what i supposed to go here ??
                  ),

Quelqu'un peut-il m'aider ?

Est-ce que c'est seulement cette pièce manquante ou est-ce qu'il me manque quelque chose d'autre ?

merci d'avance

[modifier : le Page AnimatedList affiche le message

Cette page est obsolète et son contenu peut être périmé.

en fait, il ne semble pas du tout utiliser ce widget].

Answer 1

J'ai trouvé la réponse à ma question aquí

vous pouvez trouver mon code --> ICI <--

et ci-dessous

    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,
          ),
        ),
      ),
    );
  }
}