システム開発部のTです。以前、Fluxで組んでいるアプリがあり、コードも分かりやすい感じでまとめられていたのを思い出しました。そこで、FlutterでもFluxで組んでみたいと思い立って、今回挑戦してみました。「Flutter Flux」で検索かけてみると、結構検索結果として表示されているのですが、その中で以下のものが気になりました。 https://github.com/google/flutter_flux GoogleがFlutter用のFluxパターンを作っていた？？？？非常に興味深い！ということで、本件では上記のFluxパターンを元にして実装してみましたので、そのレポートを書いていきたいと思います。 実装イメージ こんな感じの動きになります。 開発準備 プロジェクトの生成 以下のコマンドを実行し、プロジェクトを生成してください。（以下、helloworldにしていますが、任意のプロジェクト名にしてください。） （※Flutterの開発環境は構築済みの前提で進めていきます。） Fluxのテンプレートクラスの生成 githubから持ってくればいいんじゃないの？？？と思った方もいるかと思いますが、そもそも最終更新日が3年前くらいなので、null safetyにも対応しておらず、そのままでは利用できないので、加工していきます。 以下、加工後のファイルの中身になります。 上記で加工したファイルを、以下のように配置しました。 ※上記で利用しているaction.dart、store.dartのクラス名はオリジナルのクラス名と意図的に変更しております。Action→FluxAction、Store→FluxStoreflutter/material.dartにも同じ名前のActionクラスが存在しており、ビルドでエラーになってしまうため。 main.dartの整理 プロジェクト作成直後に生成されているmain.dartを見てみましょう。（以下、不要なコメントは削除済みです） このままだと見栄えが悪いので、classごとにファイルを分けます。分けたあとの内容が以下になります。 動作確認 上記までコード分けしたら、動作確認してみます。以下の画面が表示されることを確認してください。 これで開発準備は完了です。 Fluxパターンに置き換え 毎度おなじみの「＋」ボタン押下で画面中央の値が変わるというサンプルコードの仕様をそのままFluxに置き換えてみます。 Actionの定義 まずは以下の内容で、Actionの定義を作ります。 本件では、インクリメントのアクションのみなので、上記の定義一つだけになります。intにはAction時に渡すパラメータを設定します。本件では、カウンターの既存値を渡してインクリメントしたいので、intにしています。 Storeの定義 Storeの定義を作成します。 MyHomePageのコード変更 _MyHomePageStateクラスの以下の箇所を変更します。 initState()をオーバーライドし、listenToStoreでIncrementStoreを取得 _incrementCounter()メソッドのsetStateを削除し、incrementAction()を実行する。 以上でMyHomePageの置き換え完了です。置き換え後のコードは以下になります。 動作確認 ここまで実装完了したら、アプリを起動してください。変更前と同様に動作することができればOKです。 Actionの追加方法 さすがにActionが一つだけというと物足りないところではあるので、本件のパターンでActionを追加するときのコーディングについて記載します。 IncrementAction.dartに追記 Incrementが加算なので、減算Decrementの追加をしてみます。IncrementAction.dartに以下の内容で追記します。（※「IncrementAction.dart」なのに、decrementAction追加は違和感ありますが・・・） IncrementStore.dartにアクショントリガー追記 上記で追加したアクション実行時のトリガーを追加します。 MyHomePage.dartの編集 _decrementCounter()を追加し、そこにアクションの実行を設定します。 デクリメント用のボタンを追加します。 ここまで追加したら、アプリを実行します。「-1」ボタンを押下したら、カウンターがデクリメントされることが確認できるかと思います。 このように、Fluxパターンでは、Actionの追加も容易にできることが、ご理解いただけたかと思います。 まとめ Googleがgithub上でFluxパターンを公開しており、せっかくなのでそのパターンを実装してみました。確かにFluxな動きかな・・・と思っておりますが、なんせ3年前のコードになるので、最新のFlutterの機能であれば、もっと効率的なコードで実装できるのでは？と率直に思いました。 業務で利用できるかは何ともいえないところですが、データの流れが一方向になるのは魅力的かと思います。そういう意味ではReduxという選択肢もあるので、引き続き研究していければと思います。 なお、開発者T的にはMVVMがシンプルでいいかな？と思っています。 以上、ありがとうございました。

Read more of this post