2017-10-07 16 views
0

リスト内の2つのアイテム間のギャップをアニメーション化したいと思います。最初は高さが0のAminatedContainerを使用することを考えましたが、この作業を行う方法はわかりません。現時点では私のコードは次のようになりますではなく、私が期待したようなアニメーションの方法でコンテナの高さを変更するんAnimatedContainerはその高さをアニメートできますか?

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

。どんな助けも喜んで受け取ります!

答えて

1

私はAnimatedSizeをご利用の場合に適しているが、私はそれを単純なアニメーションを作成する方法について例を追加した場合は確認していない:

着色はのために少しオフになっています録音しても、自分でテストすることができます。

enter image description here

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; 
          })), 
       ], 
      ) 
      ],) 
      ,) 
    ); 
    } 
} 
関連する問題