flutter-responsive-layout

Flutter のレスポンシブレイアウト

推測したデバイスモデルではなく、親から渡される制約に基づいて設計します。

診断

テキストの拡大率と該当プラットフォームのクロームを適用し、問題が発生するビューポートでレイアウトを再現します。最初に意味のある制約エラーまたはオーバーフローエラーを読み、どのウィジェットが適合しないサイズを課しているかを特定します。フレームワーク例外が発生しない場合は、コンソールに問題がないからレイアウトが使えると決めつけず、影響を受けるコンポーネントのジオメトリとヒットテストの動作を調べます。

ルール

• サブツリーがローカル制約に応じて変化する場合は LayoutBuilder を使い、ウィンドウやアクセシビリティのプロパティに応じて動作が変わる場合は MediaQuery を使います。
• コンテンツに基づいた少数のブレークポイントを選び、特定のデバイス名で分岐しないでください。
• 固定幅・固定高さによる対処ではなく、柔軟な制約、折り返し、スクロール、または別の構成を優先します。
• 大きなディスプレイでも読みやすいコンテンツ幅を保ち、すべての要素を引き伸ばさないでください。
• スペースが大きく変化する場合は、ナビゲーションと情報密度を調整します。
• セーフエリア、ディスプレイの機能、キーボードのインセット、テキストの拡大率、ポインター入力とタッチ入力の両方に対応します。
• 根拠もなく、複雑で処理負荷の高いツリーに IntrinsicHeight や繰り返しの固有サイズ計測を使用しないでください。

検証

各ブレークポイントの直前と直後の幅、長いローカライズ文字列、大きなテキスト、横向き表示、想定するデスクトップ／ウェブのウィンドウサイズを試します。視覚的なアサーションで確実に表現できるリグレッションには、対象を絞ったウィジェットテストまたはゴールデンテストを追加します。

コンポーネントが重なったり、切り取られたり、操作要素を覆ったりする場合は、ジオメトリ、ビューポート、フィクスチャのテストに関するリファレンスに従います。交差するすべてのレンダーボックスを不具合とみなすのではなく、重要なコンポーネント間の空間的な関係を明確に定義します。

リファレンス

アダプティブナビゲーションが対象となる場合は、アダプティブナビゲーションパターンのリファレンスに従います。

出典

• アダプティブデザインとレスポンシブデザイン
• レスポンシブレイアウトの構築