【Flutter】パタパタ時計作ってみた【Animation】

こんにちは。 pregum_foxです。

今回は、Flutterでパタパタ時計みたいなものを作って見ました。

以下のサイトを参考にしました。

Make 3D flip animation in Flutter - Flutter Community - Medium

目次です

開発環境

開発環境は以下の通りです

項目	バージョン
Dart	2.5.0
Flutter	1.9.1+hotfix.2

成果物

こちらになります。

パタパタ時計

300行程度のコードですが、ちゃんと動作します。
rxdartとAnimationとtransformが主な処理を担っています。
コードは以下に記載しています。

パタパタ時計サンプル · GitHub

では、処理の流れを説明します。

処理の流れ

1. PublishSubject<DateTime>の生成
   streamを使用する為に、initState()で、PublishSubject<DateTime>に1秒ごとに値を発行させるようにします。

2. Widgetの作成
   Widgetをbuildします。
   ここで、パタパタ時計になるWidget:FlipFlipWidgetを作成しています。
   後述しますが、ここでは上半分と下半分のContainerを2個づつ作成しています。
   また、コンストラクタでPublishSubject<DateTime>とフィルタリング用のFunction()を渡して、streamを取得できるようにしています。(本当はPublishSubject<DateTime>ではなく、streamを渡した方がいいと思います。)

3. streamに流れて来た値を処理し、Animationの実行
   streamに流れてきた値をまずwhereでフィルタリングし、流れてきた値を内部の_newTimeフィールドを次に表示する数字に更新しAnimationを実行します。 gifを見る限り、上半分の板が倒れてまた次の板が倒れてという風に見えますが、実は上半分のContainerを90度回転させた所で下半分用のContainerを動かしています。
   なので、動かすContainerと背景として使用するContainerでそれぞれ2個づつContainerが必要になります。
   また、上半分のContainerと下半分のContainerではAnimationさせる区間をそれぞれ0～0.5と0.5～1.0に設定しています。

4. 終了時、disposeを行う
   Animationのdisposeを行います。

関連して作成できそうなもの

• ザ・ベストテンのパタパタ
  (正式名称は反転フラップ式案内表示機、またはソラリーと呼ばれるらしいです。)
• カジノのスロットのリール

雑感

海外の方が様々なサンプルを上げてくれているので、それを見てまねているだけでも学びがあると思うので、今後も作りながら吸収していきたいと思います。
また、rxdartは触ってみた感じ書き方の流れはReactive Extensionsと似たような感じだったので(sinkとstreamがまだ慣れていませんが。。。)今後も、どんどん取り入れていきたいと思います。
只、まだ各種メソッドの早見表的なサイトがなかったので、余裕があれば調べてブログに載せるかもしれません。

参考サイト

• Make 3D flip animation in Flutter - Flutter Community - Medium
• 反転フラップ式案内表示機 - Wikipedia
• ReactiveX