この章では、これまで個別に記述してきた読み込み中、表示完了、エラー時のUIを一つのメソッドへ整理します。

状態ごとの条件分岐がbuild()内へ増え続けると、画面全体の構造が読みにくくなります。そこで、ViewerStatusを受け取り、表示すべきWidgetを返す処理へ分離します。

15.1 現在の表示処理を確認する

これまでのStackでは、状態ごとに複数のifを記述していました。

if (_status == ViewerStatus.loading)
  _buildLoadingOverlay(),

if (_status == ViewerStatus.error)
  _buildErrorOverlay(),

if (_status == ViewerStatus.ready)
  _buildGestureGuide(),

この方法でも動作しますが、状態が増えるほど条件分岐も増えます。

また、loading、ready、errorは同時に成立しないため、「現在の状態に対応するWidgetを一つ返す」という形にまとめられます。

15.2 状態別Widgetを返すメソッドを作る

状態に応じた表示を返すメソッドを追加します。

/// 現在のビューアー状態に対応する表示を構築します。
///
/// 入力: なし
/// 出力: 読み込み状態に対応する[Widget]
Widget _buildStatusOverlay() {
  switch (_status) {
    case ViewerStatus.loading:
      return _buildLoadingOverlay();

    case ViewerStatus.ready:
      return _buildGestureGuide();

    case ViewerStatus.error:
      return _buildErrorOverlay();
  }
}

このメソッドは、現在の_statusを確認し、対応するWidgetを一つ返します。

状態判定が一か所へ集約されるため、どの状態で何が表示されるのか把握しやすくなります。

15.3 switch文を理解する

switch文は、一つの値を複数の候補と比較するときに使用します。

switch (_status) {
  case ViewerStatus.loading:
    return _buildLoadingOverlay();

  case ViewerStatus.ready:
    return _buildGestureGuide();

  case ViewerStatus.error:
    return _buildErrorOverlay();
}

_statusがViewerStatus.loadingなら、読み込み表示を返します。

ViewerStatus.readyなら操作案内、ViewerStatus.errorならエラー画面を返します。

ViewerStatusに定義されているすべての値を処理しているため、defaultは必要ありません。

15.4 switch式で簡潔に記述する

Dartでは、switchを式として記述できます。