アダプティブレイアウトの実装

目次

• スペース測定ガイドライン
• ウィジェットのサイジングと制約
• デバイスと画面向きの動作
• ワークフロー: アダプティブレイアウトの構築
• ワークフロー: 大画面用の最適化
• 例

スペース測定ガイドライン

利用可能なスペースを正確に測定し、アプリウィンドウに適応するレイアウトを確保します。

• MediaQuery.sizeOf(context)を使用する - アプリウィンドウ全体のサイズを取得します。
• LayoutBuilderを使用する - 親ウィジェットに割り当てられたスペースに基づいてレイアウトの判定を行います。constraints.maxWidthを評価して、返すべき適切なウィジェットツリーを決定します。
• MediaQuery.orientationOfやOrientationBuilderをウィジェットツリーの上位で使用しない - デバイスの向きは利用可能なアプリウィンドウスペースを正確に反映しません。
• ハードウェアタイプをチェックしない (例: 「スマートフォン」対「タブレット」) - Flutterアプリはリサイズ可能なウィンドウ、マルチウィンドウモード、ピクチャーインピクチャーで実行されます。すべてのレイアウト判定は利用可能なウィンドウスペースのみに基づいてください。

ウィジェットのサイジングと制約

Flutterのコアレイアウトルールを理解して適用します: 制約は下へ進む。サイズは上へ進む。親が位置を設定する。

• スペースの配分: Row、Column、またはFlexウィジェット内でExpandedとFlexibleを使用します。
  • Expandedを使用して、チャイルドが残りのスペースをすべて埋めるよう強制します (Flexibleとfit: FlexFit.tightおよびflex係数1.0の等価物)。
  • Flexibleを使用して、チャイルドが特定の制限まで自身のサイズを決定しながら、展開/縮小を可能にします。flex係数を使用して、兄弟ウィジェット間のスペース消費の比率を定義します。
• 幅の制約: 大画面でウィジェットが水平スペースをすべて消費するのを防ぎます。GridViewやListViewなどのウィジェットをConstrainedBoxまたはContainerでラップし、BoxConstraintsにmaxWidthを定義します。
• 遅延レンダリング: アイテム数が不明または大量のリストをレンダリングする場合、常にListView.builderまたはGridView.builderを使用します。

デバイスと画面向きの動作

すべてのデバイスフォームファクターと入力方法で、アプリが正しく動作することを確保します。

• 画面の向きをロックしない。 向きをロックすると、折りたたみデバイスで深刻なレイアウト問題が発生し、レターボックス化 (アプリが黒い枠で中央に表示される) につながることがよくあります。Android大型フォーマットティアは縦向きと横向きの両方のサポートを必須とします。
• ロックされた向きのフォールバック: ビジネス要件で向きのロックが厳密に必須の場合、MediaQueryの代わりにDisplay APIを使用して物理的な画面寸法を取得します。MediaQueryは互換性モードでのより大きいウィンドウサイズの受信に失敗します。
• 複数の入力をサポートする: 基本的なマウス、トラックパッド、キーボードショートカットのサポートを実装します。タッチターゲットが適切なサイズになっており、キーボードナビゲーションがアクセス可能であることを確認します。

ワークフロー: アダプティブレイアウトの構築

このワークフローに従って、利用可能なBoxConstraintsに適応するレイアウトを実装します。

タスク進行状況:

• アダプティブ動作が必要なターゲットウィジェットを特定します。
• ウィジェットツリーをLayoutBuilderでラップします。
• ビルダーコールバックからconstraints.maxWidthを抽出します。
• アダプティブブレークポイントを定義します (例: largeScreenMinWidth = 600)。
• maxWidth > largeScreenMinWidthの場合: 大画面レイアウトを返します (例: ナビゲーションサイドバーとコンテンツエリアを横並びに配置したRow)。
• maxWidth <= largeScreenMinWidthの場合: 小画面レイアウトを返します (例: Columnまたは標準ナビゲーション形式)。
• バリデータを実行 → アプリケーションウィンドウをリサイズ → レイアウトトランジションを確認 → オーバーフローエラーを修正します。

ワークフロー: 大画面用の最適化

このワークフローに従って、UI要素が大型ディスプレイで不自然に伸びるのを防ぎます。

タスク進行状況:

• 全幅コンポーネントを特定します (例: ListView、テキストブロック、フォーム)。
• リストを最適化する場合: ListView.builderをSliverGridDelegateWithMaxCrossAxisExtentを使用してGridView.builderに変換し、ウィンドウサイズに基づいて列数を自動調整します。
• フォームまたはテキストブロックを最適化する場合: コンポーネントをConstrainedBoxでラップします。
• BoxConstraints(maxWidth: [optimal_width])をConstrainedBoxに適用します。
• ConstrainedBoxをCenterウィジェットでラップして、制約されたコンテンツを大画面で中央に保ちます。
• バリデータを実行 → デスクトップ/タブレットターゲットでテスト → 水平方向の伸びを確認 → maxWidthまたはグリッド範囲を調整します。

例

LayoutBuilderを使用したアダプティブレイアウト

利用可能な幅に基づいてモバイルとデスクトップレイアウトを切り替えるデモンストレーション。

import 'package:flutter/material.dart';

const double largeScreenMinWidth = 600.0;

class AdaptiveLayout extends StatelessWidget {
  const AdaptiveLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > largeScreenMinWidth) {
          return _buildLargeScreenLayout();
        } else {
          return _buildSmallScreenLayout();
        }
      },
    );
  }

  Widget _buildLargeScreenLayout() {
    return Row(
      children: [
        const SizedBox(width: 250, child: Placeholder(color: Colors.blue)),
        const VerticalDivider(width: 1),
        Expanded(child: const Placeholder(color: Colors.green)),
      ],
    );
  }

  Widget _buildSmallScreenLayout() {
    return const Placeholder(color: Colors.green);
  }
}

大画面での幅の制約

ウィジェットが水平スペースをすべて消費するのを防ぐデモンストレーション。

import 'package:flutter/material.dart';

class ConstrainedContent extends StatelessWidget {
  const ConstrainedContent({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(
            maxWidth: 800.0, // 可読性のための最大幅
          ),
          child: ListView.builder(
            itemCount: 50,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
        ),
      ),
    );
  }
}