仕様との比較がしやすいモバイルアプリの複雑な画面の実装

悪い実装例: モデルのクラスのフィールドの値による条件分岐を、ウィジェット内で直接行っていて、仕様との対応関係が分かりにくい
良い実装例: 仕様に対応した形で条件分岐部分がまとまっている

// Banner（在庫・予約・定期・在庫わずか）をView内で直接分岐
class _BadBanner extends StatelessWidget {
  final Order order;
  const _BadBanner({required this.order});

  @override
  Widget build(BuildContext context) {
    String? banner;
    final hasSoldOut = order.items.any((i) => i.stock == Stock.soldOut);
    if (hasSoldOut && order.orderType != OrderType.preorder) {
      banner = '在庫がありません';
    } else if (order.orderType == OrderType.preorder) {
      banner = '予約商品は代引不可';
    } else if (order.orderType == OrderType.subscription) {
      banner = '定期購入はクレジットカードのみ';
    } else if (order.items.any((i) => i.stock == Stock.limited)) {
      banner = '在庫が残りわずかです';
    }

    if (banner == null) return const SizedBox.shrink();
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: const Color(0xFFFFF3CD),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(banner),
    );
  }
}

@freezed
sealed class BannerState with _$BannerState {
  const factory BannerState.none() = BannerNone;
  const factory BannerState.info(String text) = BannerInfo;
}
// ...以下省略

GoodOrderFormPageUiState deriveGoodUiState(Order o) {

  // 1) 在庫なし（予約除く）
  final hasSoldOut = o.items.any((i) => i.stock == Stock.soldOut);
  if (hasSoldOut && o.orderType != OrderType.preorder) {
    final allowed = (card: false, cod: false, bank: false);
    final selected = coerceSelected(
      o.paymentMethod,
      card: allowed.card,
      cod: allowed.cod,
      bank: allowed.bank,
    );
    return GoodOrderFormPageUiState(
      banner: const BannerState.info('在庫がありません'),
      payment: PaymentUiState.options(
        card: allowed.card,
        cod: allowed.cod,
        bank: allowed.bank,
        selected: selected,
      ),
      address: o.shipment == Shipment.home
          ? AddressSectionState.needHome(
              postalCode: o.shippingAddress?.postalCode ?? '',
              addressLine1: o.shippingAddress?.line1 ?? '',
            )
          : AddressSectionState.needPickup(
              storeCode: o.pickupStore?.storeCode ?? '',
            ),
      buy: const BuyButtonState.disabled('在庫なし'),
      paymentDetail: detailFor(selected),
      subtotal: o.totalBeforeDiscount,
      discount: o.discountAmount,
      total: o.totalAfterDiscount,
    );
  }

  // 2) 予約：代引不可
  if (o.orderType == OrderType.preorder) {
    final allowed = (card: true, cod: false, bank: true);
    final selected = coerceSelected(
      o.paymentMethod,
      card: allowed.card,
      cod: allowed.cod,
      bank: allowed.bank,
    );
    return GoodOrderFormPageUiState(
      banner: const BannerState.info('予約商品は代引不可'),
      payment: PaymentUiState.options(
        card: allowed.card,
        cod: allowed.cod,
        bank: allowed.bank,
        selected: selected,
      ),
      address: o.shipment == Shipment.home
          ? AddressSectionState.needHome(
              postalCode: o.shippingAddress?.postalCode ?? '',
              addressLine1: o.shippingAddress?.line1 ?? '',
            )
          : AddressSectionState.needPickup(
              storeCode: o.pickupStore?.storeCode ?? '',
            ),
      buy: const BuyButtonState.enabled(),
      paymentDetail: detailFor(selected),
      subtotal: o.totalBeforeDiscount,
      discount: o.discountAmount,
      total: o.totalAfterDiscount,
    );
  }
  // ...以下省略
}

// Banner
class _GoodBannerView extends StatelessWidget {
  final BannerState state;
  const _GoodBannerView({required this.state});
  @override
  Widget build(BuildContext context) => switch (state) {
    BannerNone() => const SizedBox.shrink(),
    BannerInfo(:final text) => Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(color: const Color(0xFFFFF3CD), borderRadius: BorderRadius.circular(8)),
      child: Text(text),
    ),
  };
}