SlideShare une entreprise Scribd logo
1  sur  7
Flutterの状態管理
2019/10/02 sh-ogawa
きょうの流れ
Flutterの状態の種類
Flutterの状態管理の方法について
Flutterの状態の種類
● Ephemeral
● app state
状態の変更検知
● ChangeNotifier
● ChangeNotifierProvider
● Consumer
https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple
コンポーネント間アクセス
● InheritedWidget
● Scoped Model
ステートメント管理
● Redux
● BLoC
おしまい

Contenu connexe

Plus de 小川 昌吾

Plus de 小川 昌吾 (14)

Njug 20180414
Njug 20180414Njug 20180414
Njug 20180414
 
Java屋からPHPerになって1年くらい経った
Java屋からPHPerになって1年くらい経ったJava屋からPHPerになって1年くらい経った
Java屋からPHPerになって1年くらい経った
 
チュートリアルではじめるVue.js
チュートリアルではじめるVue.jsチュートリアルではじめるVue.js
チュートリアルではじめるVue.js
 
受託、SES、WEBと経験したので比較してみた
受託、SES、WEBと経験したので比較してみた受託、SES、WEBと経験したので比較してみた
受託、SES、WEBと経験したので比較してみた
 
ITの開発現場における最近の当たり前これからの当たり前(主観)
ITの開発現場における最近の当たり前これからの当たり前(主観)ITの開発現場における最近の当たり前これからの当たり前(主観)
ITの開発現場における最近の当たり前これからの当たり前(主観)
 
非エンジニアに捧ぐツアーオブ構成管理
非エンジニアに捧ぐツアーオブ構成管理非エンジニアに捧ぐツアーオブ構成管理
非エンジニアに捧ぐツアーオブ構成管理
 
Dynamo db はじめの一歩
Dynamo db はじめの一歩Dynamo db はじめの一歩
Dynamo db はじめの一歩
 
スキトラGit
スキトラGitスキトラGit
スキトラGit
 
スキトラ Spring + mybatis
スキトラ Spring + mybatisスキトラ Spring + mybatis
スキトラ Spring + mybatis
 
テストコード入門
テストコード入門テストコード入門
テストコード入門
 
IoT検定
IoT検定IoT検定
IoT検定
 
MySQL入門
MySQL入門MySQL入門
MySQL入門
 
Git入門
Git入門Git入門
Git入門
 
DevOpsを支える技術勉強会(CI編)
DevOpsを支える技術勉強会(CI編)DevOpsを支える技術勉強会(CI編)
DevOpsを支える技術勉強会(CI編)
 

Notes de l'éditeur

  1. Ephemeral 単一ウィジェットだけで事足りるインスタンスステートメント StatefullWidgetのこと app state 複数・または全てのウィジェットのステートメント
  2. 一番基本的なヤツ ChangeNotifier JavaのListenerと同じで、 addListenerで登録している機能に対して、 notifyListenersでまとめて通知して必要な処理を実行させる ChangeNotifierProvider notifyListenersした場合に、Consumerへ型情報を丸ごと渡す場合に使う 用は型で縛るってだけ。これ使わないとObject参照になって、自分で型チェックしないといけなくなる Consumer ChangeNotifierProvider経由でデータを受け取って、widgetを再構築する Notificationを受けて再描画したいwidgetに直接配置する ちなみに通知
  3. InheritedWidget 子ウィジェットが親ウィジェットのデータにアクセスできるようにするヤツ。 イベントリスナー使わないで体でデータをやり取りできるって書いてあるけど、 実際はnotifier経由で更新データ受け取ってるので、内部的にはイベントリスナーと同じヤツだと思われる。 最近流行りのWEBフレームワークのリアクティブシステムを想像すればOK。 つまり、ウィジェットツリーが浅い間は問題ないけど、 深くなるとバケツリレー怠い問題が発生する Scoped Model InheritedWidgetとnotifyListenerの併せ技 Wiget自体はStatelessにできるが、モデルごとにnotifierを受け付けないといけなくなるため、 Widgetが大きくなると、イベント地獄になる。 どこから何のイベントが出てるのか判らなくなる問題が出てくる
  4. Redux グローバル状態管理。 WEBでいうところのReduxと同じ文脈で語られてるヤツ。 State、Action、Reducerのこと。 Vuexでいう所の、State、Action、Mutationのこと。 ログイン状態みたいに、シングルトンなデータが対象のモノに使う これが守られてないと死ねるらしい。 ※スマホは裏でマウントしたままとか何とか。 BLoC StreamBuilderを使って、Stream経由で変更データを受け取る方法 Streamを渡してくるのはMVCの文脈でいうところのモデル モデルが画面からの入力を受け取って、バリデーションしたりデータを加工したりした結果をStreamで流す。 StreamBuilderはデータが流れてくれば、Widgetを再構築するので、Widgetのリビルドが必要な箇所をピンポイントで再描画できるから、 理屈上簡単に負荷の低い画面が作れる。 Bissiness Logic Componentって名前付いてるから、まぁロジックが入ってるけど、 別にStreamでデータを更新するようにすればModelがあろうが無かろうがどっちでも良さげ、というのが自分の見解。 RxDartと組み合わせて、最後に入力された値が正常のものをサブミット時は返すとかするとスムーズになる。 ※異常時はデータは空になる