狐好きぷろぐらまー

狐好きプログラマー見習いのブログです。

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

こんにちは。 pregum_foxです。

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

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

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

目次です

開発環境

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

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

成果物

こちらになります。

f:id:pregum_fox:20191001224815g:plain
パタパタ時計

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がまだ慣れていませんが。。。)今後も、どんどん取り入れていきたいと思います。
只、まだ各種メソッドの早見表的なサイトがなかったので、余裕があれば調べてブログに載せるかもしれません。

参考サイト