この章では、3Dモデルの読み込みに失敗した場合のエラー表示と、再読み込みボタンを実装します。

通信を利用するアプリでは、常に成功するとは限りません。URLの間違い、ネットワーク切断、サーバー停止、ファイル破損など、さまざまな理由で3Dモデルを取得できないことがあります。

エラーを無視せず、利用者へ状況と次の操作を伝えることが重要です。

14.1 エラー表示に必要な情報

前章までに、エラー発生時は次の状態が保存されています。

_status = ViewerStatus.error;
_errorMessage = error;

_statusは現在の状態を表し、_errorMessageは失敗理由を保持します。

エラー画面では、最低限次の内容を表示します。

• 読み込みに失敗したこと
• エラーの概要
• 再読み込みするためのボタン

詳細なエラー文字列は、利用者にとって分かりにくい場合があります。そのため、見出しは簡潔にし、技術的な内容は補足として小さく表示します。

14.2 エラー用Widgetを作成する

エラー表示をbuild()へ直接書くとコードが長くなるため、専用メソッドへ分離します。

/// 3Dモデル読み込み失敗時の案内を構築します。
///
/// 入力: なし
/// 出力: エラー内容と再読み込みボタンを含む[Widget]
Widget _buildErrorOverlay() {
  return Center(
    child: Padding(
      padding: const EdgeInsets.all(24),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Icon(
            Icons.error_outline,
            size: 44,
            color: Color(0xFF8B2E2E),
          ),
          const SizedBox(height: 12),
          const Text(
            '3Dモデルを読み込めませんでした',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 17,
              fontWeight: FontWeight.w700,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            _errorMessage,
            textAlign: TextAlign.center,
          ),
        ],
      ),
    ),
  );
}

mainAxisSizeへMainAxisSize.minを指定すると、Columnは必要な高さだけを使用します。

14.3 長いエラーメッセージを省略する

外部パッケージから返されるエラーは、非常に長い場合があります。そのまま表示すると、ボタンが画面外へ押し出される可能性があります。

Text(
  _errorMessage.isEmpty
      ? '通信環境を確認して、もう一度お試しください。'
      : _errorMessage,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
  textAlign: TextAlign.center,
  style: const TextStyle(
    color: Color(0xFF666666),
    fontSize: 12,
    height: 1.5,
  ),
)

maxLinesは最大行数、TextOverflow.ellipsisは入りきらない内容を省略記号で表します。