Flutterの状態管理について調べたメモ

Flutterでの状態管理方法について雑に調べた時のメモです。

先に感想を書いておくと、

Inherited Widget/Scoped Model/BLoC Patternでそれぞれ軽くアプリを書いたりしてみたけど、自分の用途レベルのアプリではScoped Modelで十分かなという感じ。BLoC Patternはweb/ios/androidでロジックを統一したい時だけ検討かな...

— 宮崎由加(24) (@razokulover) October 8, 2018

以下、有益そうな記事or動画リンクが主です。

Flutterで状態管理の仕方色々

• Flutter Architecture Samples
  • Inherited Widget/Scoped Modelの他、ReduxやMVUといったパターンのサンプルもある
• (動画)Build reactive mobile apps with Flutter
  • 2018年のGoogleI/Oで話されてた動画。BLoC Patterについても触れてる。
  • これで話してたやつのコード。
    • https://github.com/filiph/state_experiments/tree/master/shared
  • ↑の動画の補足とかをSpeakerがmediumに書いてるやつ
    • Build reactive mobile apps in Flutter — companion article
• (動画)FirebaseとFlutterを使う方法
• (動画)Flutter / AngularDart – Code sharing, better together (DartConf 2018)

Inherited Widget

• Flutterの標準ライブラリで提供されているWidget。setState + αといった感じの状態管理ができる。
• Using Flutter’s InheritedWidget to hold app state
• FlutterのWidgetのソース
• Inheriting Widgets
• Inherited widgetでカウンターを書き直した
  • https://github.com/YuheiNakasaka/flutter_inherited_widget_example

Scoped Model

• Fuchsiaでも採用されている状態管理ライブラリ
• 状態変更をしたらnotifyListers()で通知し、変更された状態を利用する時はScopedModelDescendantでwrapして利用する感じ
• scoped_modelの実装例

  • 基本的な構成

    • Model
      • Widgetから呼び出される
      • Repositoryのメソッドを呼ぶ
      • Repository
        • データへのCRUD操作のメソッドを外部に提供
        • Entity
          • データの定義
  • 非同期な操作はpackage:asyncのFutureでWrapしてthen/catchで対応
• Scoped Modelでカウンターを書き直した
  • https://github.com/YuheiNakasaka/flutter_scoped_model_example

BLoC Pattern

• Flutterで使うStreamについて
  • 登場人物
    • StreamController
    • Stream
    • Sink
    • StreamBuilder
  • SinkはStreamにeventを流す
  • Streamにeventが流れてくる
  • StreamBuilderがStreamをlistenしてeventの通知を受けてcallbackを実行する
  • StreamControllerはStream/Sinkを管理する親みたいな感じ
• BLoC Pattern
  • BLoC = Bussiness Logic Component
  • 複数のプラットフォームで再利用しやすいようにビジネスロジックを分離するための状態管理の設計手法
  • InputにSinkを、OutputにStreamを使う
• Reactive Programming - Streams - BLoC
  • StreamとReactive ProgrammingとBLoCについての概念の説明とそれらの実装方法について解説してある
  • Flutter + BLoC Patternのイメージ
    • 
  • 複数のプラットフォームで利用する想定がないのであれば、Input/OutputにSink/Streamを強制する必要はないのでは？派
  • 実践サンプルソース
    • https://github.com/boeledi/Streams-Block-Reactive-Programming-in-Flutter
• BLoCパターンとはなにか - FlutterとAngularの間でModelのコードを再利用する実践を通じての考察
  • チャットアプリをBLoCパターンで実装した場合を例にとり解説と考察を行なっている記事。MVVM・リアクティブプログラミング・Clean Architectureの知識などが要求されるのでEasyではないがBLoCパターンの概念のSimpleさを理解するにはとても良い記事。
  • Input/OutputをSink/Streamに強制することでBLoCごとのコミュニケーションが容易になるのでcomposabilityが増す
• BLoC Patternでカウンターを書き直した
  • https://github.com/YuheiNakasaka/flutter_bloc_pattern_example

この先

実際にScopedModelあたりで大きめのアプリを書いてみる。

Android/iOSクロス開発フレームワーク Flutter入門