flutter-text-rendering

Flutter Text Rendering

動的なコンテンツの長さ、ロケール、アクセシビリティ設定の変化にかかわらず、読みやすく予測可能なテキストを表示します。

診断

レイアウトを調整する前に、問題の原因を特定します。

1. 主軸方向のフレックスオーバーフロー： フレックスではない Text は、Flex の主軸方向に制約のない制約を受けることがあり、兄弟要素の横にある利用可能なスペースを超える固有サイズを選ぶ場合があります。その結果、RenderFlex overflowed が発生します。
2. 単語の孤立（ウィドウ）： 最後の空白で改行されたために、見出しや段落の最後の単語だけが新しい行に取り残されます。
3. 制御されていない切り捨て： テキストが気づかれないままクリップされたり、視覚的な切り捨て表示（ellipsis、fade）なしに意図した行数を超えたりします。
4. インライン表示の崩れ： 隣り合う複数の Text ウィジェットが、連続した段落のように流れず、Row 内で不自然に改行されます。
5. テキストスケーリングによる崩れ： システムフォントの拡大（TextScaler）により、固定高のコンテナー内でテキストがクリップされたり、重要な操作要素が画面外に押し出されたりします。

ルール

• すべての Text ではなく、競合する枝を制約します： Row でテキストが兄弟要素と有限の横幅を共有する必要がある場合は、Flexible、Expanded、SizedBox、または ConstrainedBox を使用します。Column ではフレックスによって縦方向の割り当てが変わるため、横方向のテキストオーバーフローに対する標準的な解決策ではありません。親の主軸方向の制約が無制限の場合は、フレックスの子を追加しないでください。
• 単語の孤立を防ぐのは、分割方法が適切な場合に限ります： ノーブレークスペース（\u00A0）を使うと、空白で単語を区切る見出し、タイトル、コールアウトで最後の2単語を結合できます。この方法をあらゆるロケールに一律に適用しないでください。
• 折り返しか切り捨てかを意図的に選びます： 全文が重要な場合は、自然な折り返しを許可します。仕様上テキストを切り捨てる必要がある場合は、maxLines を明示し、TextOverflow.ellipsis、TextOverflow.fade、または TextOverflow.clip と組み合わせます。1行でのクリッピングが許容されるか確認せずに softWrap: false を設定しないでください。
• インラインスタイルには Text.rich を使用します： ウェイト、色、インラインバッジ（WidgetSpan）、またはリンクの認識処理を組み合わせる場合は、周囲のスタイルとテキストスケーリングを適用できる Text.rich を優先します。生の RichText では、スパンのスタイルとスケーリングを意図的に指定する必要がありますが、周囲のテキスト方向は継承できます。
• レイアウトがコピーのサイズに依存する場合は、TextPainter でテキストを計測します： 動的なチップ、カスタムキャンバスのコールアウト、または展開可能な「続きを読む」ウィジェットを作成する場合は、明示的な maxWidth に加え、周囲のテキスト方向、ロケール、TextScaler を指定して TextPainter をレイアウトし、描画後の高さと didExceedMaxLines を確認します。
• テキストスケーリングに対応します： システムフォントの拡大（MediaQuery.textScalerOf(context)）をサポートします。テキストを固定高のコンテナーに配置するのは避け、柔軟なコンテナーやスクロール可能なコンテナーを優先します。
• 国際化を考慮します： ローカライズされた文字列の長さが20～35％増えても収まるようにテキスト用コンテナーを設計し、双方向テキスト（TextDirection）をサポートします。

条件に応じて参照

• フレックスオーバーフローの修正、ノーブレークスペースを使った単語の孤立の解消、TextPainter による計測の設定、または複数行の切り捨ての管理を行う場合は、テキストのオーバーフローと折り返しを参照してください。

検証

以下の条件でテキストコンポーネントをテストします。

1. 最小の長さのコピー（空、または短い単語1つ）。
2. 想定される現実的なコピー。
3. 最大の長さのコピー／ローカライズされたコピー（アクセント付き文字や、空白を含まない長い文字列を含む）。
4. 拡大したフォントスケーリング（TextScaler.linear(1.5) および TextScaler.linear(2.0)）。
5. 親の幅が制限された状態（幅の狭いモバイル画面、余裕のないカード、リスト項目）。

RenderFlex のオーバーフローがないこと、意図した行数であること、切り捨てやノーブレークスペースによる単語の結合が想定どおりに表示されることを確認するウィジェットテストを作成します。

Sources

• Flutter Text class
• Flutter RichText class
• Flutter TextPainter class
• Flutter TextOverflow enum
• Flutter TextScaler class