フラッターをコード化しましょう:アニメーション!

Androidでは、我々は通常、設定によって非常にシンプルなアニメーションを行うことができますanimateLayoutChanges レイアウトのXMLのビューグループではtrueです.それは私の試行され、真の方法は長い間今です.どのようにダイアログや活動が表示されますどのような変更よりも高度な何かは、トラブルの価値がないことが終わった頭痛を引き起こしている.
したがって、私はアニメーションで多くをしていませんでした、そして、より多くを成し遂げた人々にはうらやましいです.
私の仕事のフラッターのアプリを起動しながら、私はいくつかのコンテンツを表示し、非表示に/拡張可能な領域を作りたいと思った.ユーザーはボタンをクリックし、それがダウンして覗いていた情報の詳細を明らかにドロップダウンします.
それは私がフラッタアニメーションのシンプルさを発見したときです.
多分、それはアンドロイドのこれのようでもあります、そして、私はちょうど彼らを全く無知でしました.私は価値観について何か知っています.ええ、それはこれほど簡単ではない!

Widget _buildCollapsableWidget() {
        var expandedWidget = _makeExpandedWidget();
        var collapsedWidget = _makeCollapsedWidget();
    return Container(
      child: AnimatedCrossFade(
        alignment: Alignment.center,
        crossFadeState: _isExpanded ? CrossFadeState.showFirst : CrossFadeState.showSecond,
        duration: Duration(milliseconds: animationDuration),
        firstChild: expandedWidget,
        secondChild: collapsedWidget,
        sizeCurve: Curves.linearToEaseOut,
      ),
    );
  }

使用AnimatedCrossFade , 私は、私が探していたものを成し遂げました:滑らかなオープンで近いアニメーション.そしてそれは簡単にカスタマイズ可能です!
ユーザーがボタンを押すと_isExpanded . 私は、これ(私が学んだ何か)のためにvaluenotifierを使いますsetState だけでなく、正常に動作します.
異状があるCurves 使用する私が選択したものは、非常にストレートで、その後、アニメーションの最後に向かって減速するためにカーブアウトを開始します.あなたは、カーブのビデオを見ることができますhere . 私はフラッタのドキュメントが大好きです
それで正直にそれ.それは超簡単です.私は同様のアニメーションをボタンを押すと、ユーザーが押すと、上キャレットとダウンの間の切り替えがAnimatedSwitcher .

// Other code here
return AnimatedSwitcher(
    duration: Duration(milliseconds: 600),
    transitionBuilder: (Widget child, Animation<double> animation) {
      return ScaleTransition(child: child, scale: animation);
    },
  child: _caretWidget,
  switchInCurve: Curves.bounceOut,
);

私は、アニメーションを投げるために、より多くの言い訳を見つけようとしています:彼らはとても単純です、そして、ほんの少しの余分のポーランドを提供します.これは、アプリは少し生きているとモダンな感じになります.
フラッターは、使いやすいアニメーションのウィジェットだけでなく、トランジションを使用する準備ができて束のトンを提供しています.私は上記のScaleTransition , しかし、サイズ、回転、さらに位置のものがあります.The AnimatedWidget ドキュメントページは、これらの詳細を提供します.
あなたはまだフラッターアニメーションを使用する機会がありましたか?もしそうなら、何をあなたはそれを建てましたか?あなたが作ったものを表示し、みんなを刺激するのを助ける!