search
LoginSignup
0

More than 1 year has passed since last update.

posted at

flutter_blocを使ってみる その1

はじめに

本日思いつきでひとりアドベントカレンダーを作ってしまいました。私は初学者なのと1日に使える時間が2時間程度なので、少しずつ進めていきます。

flutter_blocを使ってみる

Flutterの状態管理としてBLoCパターンというものがあります。その中で一般的なライブラリであるflutter_blocを使ってみます。

注: 現在は状態管理手法としてはBLoCパターンは主流ではないようです。これから始める場合はproviderまたはriverpodを用いた方が良いと思います。

注2: BLoCの説明はこちらを参照してください。かんたんに言うとStreamを用いた状態管理手法です。

一歩目: 公式Exampleを動かしてみる

公式のExapmleを動かしてみます。

Simulator Screen Shot

Exampleの動作

Exampleはボタンを押すことで以下の動作をします
- A. 中央の数字が変化する
- B. カラーテーマが変わる
- (エラーを出す)

ExampleではこのA. をBLoC、B. をより簡易的なCubitを用いて実装しています。

BLoCの動作

flutter_blocパッケージでのBLoCがする動作は、Eventを受け取ってStateを返すというものです。
通常はユーザーのボタンを押す等の操作をトリガーにしてUIからEventを受け取り、そのEventに応じたStateをUIに返します。
UIは受け取ったStateをもとにウィジェットを再構成します。
Exampleでは「+」「-」のボタンが押されることでそれぞれ数値を増加させるイベントと減少させるイベントをBLoCが受け取ります。
受け取ったイベントによってBLoCは初期値0のint型のStateを増減させてUIに返します。

Cubitの動作

CubitはBLoCの簡易版で、UIからイベントを受け取らず、メソッド呼び出しを受け取ります。
Exampleではボタンを押されることでCubitのメソッドが呼ばれて、明暗のColorThemeが反転します。

BLoC、Cubitの動作の概念図

いずれもウィジェットツリーの中のボタン等のUIからイベントまたはメソッド呼び出しを受け取り、BLoCまたはCubitが状態を変化させることでUIが再描画されるという図式になります。

1_giaQZugU17XFsOU-7VhLdw.png

まとめ

flutter_blocパッケージのExampleを使ってBLoCとCubitの動きの概要を説明しました。
明日はExampleのコードを使って学習をしてみます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0