Flutter TDD Clean Architecture Course その10 - Bloc ScaffoldingとInput Conversion

• こちらのチュートリアルの解説をします。
• チュートリアルを読むのが早いと思いますが、概要をまとめたのでこちらもご参照ください。

前回まで

• CleanArchitectureに基づき以下をTDDで実装しました
  • Domain層
  • Data層

今回やること

• Presentation層の実装に着手します
  • BLoCの作成に着手します

---

チュートリアル解読

Presentation層

以下のようなもので構成さｓれる

• WidgetによるUI
• Presentation Logic
  • ChangeNotifier
  • BLoC
  • ViewModel等
• ここではBLoCを用いる

BLoC

概要

• Business Logic Component
  • CleanArchitecture上ではPresentation Logicを扱う
    • なのでDomain層ではなくPresentation層の役割を担う
    • Domain層がビジネスロジックを担っている

構成

Events

• "get concrete number" のようなイベント
• UIから送られる

Bloc

• Eventsを受け取る
• CleanArchitectureではUseCaseを実行する

States

• BlocからUIに送られる
  • UIはそのStatesを基に描かれる
• NumberTriviaのようなインスタンスを持つ

BLoCの実装

Events

• NumberTriviaアプリでは2つのイベントを作る
  • 理由: ConcreteNumberとRandomNumberを表示させる2つのボタンを持つから
• EventsはWidgetsから送られる
  • Buttonを押すことで、TextFieldに入力されたStringが送られる

InputConverter

• Either<Failure, int> stringToUnsignedInteger(String str)を持つInputConverterを作成する
  • TextFieldに入力されたStringをint（またはFailure）に変換する

States

• 以下のStateを作成する
  • Empty
  • Loading
  • Loaded
  • Error

学んだこと

• CleanArchitectureではBlocはPresentation層に位置する
  • MVVMのVMのような位置だと思う
  • EntityとUseCaseがDomain層となる
• 通常の設計だとBloCがDomain層に位置することがあるのだと思う

Blocの構成

• UIがEventをBlocに送る
• Blocが受け取ったEventをもとにStateを作成し通知する
• Stateを受け取ったUIが再描画する