今日はEveryDaySoft代表の永田です。今回はFlutterプラットフォームDart言語の表示、非表示。アニメーション、タップアクションなどの簡単な方法を紹介します。
最近もFlutter案件で開発してます。世の中にはないアーキテクチャを編み出しつつ開発を進めています。
ソースコード
何もサイトなど見ずに、3分ぐらいで作成しました。途中からですが、少し記録してみました。
https://gist.github.com/daisukenagata/865d0e2c2bca2b215b084bd710be695e
挙動
２つのWidgetを同じ位置に実装して、一つが表示、操作有効にする場合は、もう一つは非表示にして、ボタンの操作を無効にしています。
アニメーションの移動系はAnimatedContainer。表示、非表示にはAnimatedOpacityが簡単です。
非表示にした場合でも操作は実行されます。その際にIgnorePointerのignoringプロパティをtrueにすると操作は無効になります。
表示した場合ignoringをfalseにして、有効になります。
追加知見
連結するアニメーション。連結するアニメーションからの画面遷移について、
AnimatedContainer、AnimatedOpacityなどでアニメーションを連動したい場合にネイティブ言語のように制御文を実行すると連結するアニメーションなどは発生せず、瞬間移動のような挙動になります。そのような場合は 前画面、今の画面、次の画面 といったWidgetを用意すると画面遷移しながらアニメーション連結するようなUXが可能になります。
貴重なお時間、お読みくださいまして、誠にありがとうございます。