search
LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

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

前回まで

  • CleanArchitectureに基づき以下をTDDで実装しました
    • Domain層
    • Data層 # 今回やること
  • Presentation層の実装に着手します
    • BLoCの作成に着手します

チュートリアル解読

Presentation層

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

  • 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が再描画する

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