Un animatedcontainer peut-il animer sa hauteur?

Question

Je souhaite animer un écart entre deux éléments d'une liste. J'ai pensé à utiliser un AminatedContainer avec une hauteur initialement à zéro mais je ne suis pas familier avec la façon de faire ce travail. Mon code au moment est:

new AnimatedContainer(
     duration: const Duration(milliseconds: 200), 
     height: App.itemSelected==id ? 50.0 : 0.0, 
     curve: Curves.fastOutSlowIn, 
    ), 

Cela ne change la hauteur du conteneur, mais pas de façon animée comme je l'avais espéré. Toute aide serait reçue avec gratitude!

Answer 1

Je ne sais pas si AnimatedSize est adapté à votre cas d'utilisation, mais j'ai ajouté un exemple sur la façon de faire une animation simple avec elle:

La coloration est un peu hors du fait de l'enregistrement mais vous devriez pouvoir le tester vous-même.

class MyAppState extends State<MyApp> with TickerProviderStateMixin { 
    double _height = 50.0; 
    double _width = 20.0; 
    var _color = Colors.blue; 

    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     body: new Center(
      child: new Column(
      mainAxisAlignment: MainAxisAlignment.center, 
      children: <Widget>[ 
       new AnimatedSize(

       curve: Curves.fastOutSlowIn, child: new Container(
       width: _width, 
       height: _height, 
       color: _color, 
      ), vsync: this, duration: new Duration(seconds: 2),), 
       new Divider(height: 35.0,), 
       new Row(
       mainAxisAlignment: MainAxisAlignment.center, 
       children: <Widget>[ 
        new IconButton(
         icon: new Icon(Icons.arrow_upward, color: Colors.green,), 
         onPressed:() => 
          setState(() { 
          _color = Colors.green; 
          _height = 95.0; 
          })), 
        new IconButton(
         icon: new Icon(Icons.arrow_forward, color: Colors.red,), 
         onPressed:() => 
          setState(() { 
          _color = Colors.red; 
          _width = 45.0; 
          })), 
       ], 
      ) 
      ],) 
      ,) 
    ); 
    } 
} 

Answer 2

Vous pouvez utiliser un AnimatedSize à cette fin.

https://docs.flutter.io/flutter/widgets/AnimatedSize-class.html