IntrinsicHeight

概要

同じRowの中に並んだ子ウィジェットの高さを、最も大きい子の固有の高さに合わせて統一します。たとえば左右に並べたカードの高さを自動的に揃えられます。このスタイルは個々の子ではなく、高さを揃えたい子を含むコンテナ（主にRow）に適用します。

プロパティ

注記

このスタイルには設定できるプロパティがありません。ウィジェットに追加するとすぐに適用されます。

使用例（効果の確認）

IntrinsicHeightはコンテナ（Row）に追加するスタイルで、親から与えられた余りの高さを埋めるのではなく、最も大きい子の内容の高さに合わせてコンテナを縮めます。以下のように作ると効果が目に見えます。

作成手順

1. 縦に十分な高さを持つ領域を用意します（例：高さ200の外側のRowまたはコンテナ）。これが親になります。
2. その中に対象のRowを1つ入れ、交差軸のアライメント（crossAxisAlignment）をstretchに設定します。
3. 対象のRowの中に背景色のあるコンテナを3つ並べて入れ、以下のように適用します。
   • カードA：青の背景
   • カードB：赤の背景
   • カードC：黄の背景＋SizedBoxのHeightを200に適用
4. 次に、対象のRowでIntrinsicHeightの適用と解除を交互に切り替えて比較します。

結果

• IntrinsicHeight解除：対象のRowが親の高さ（200）をそのまま受け取り、A・B・Cの背景がすべて200まで伸びます（内容とは関係なく余分に占有）。
• IntrinsicHeight適用：対象のRowが最も大きい子（C）の内容の高さまで縮み、A・B・Cの背景がその高さに統一されます。親の余った縦のスペースは埋めません。

つまりIntrinsicHeightの中心的な動作は「親から与えられた余りの高さを埋めず、最も大きい子の内容の高さに合わせる」ことです。適用と解除を交互に切り替えると、この違いがはっきり見えます。

ヒント

効果が見えるには3つの条件が必要です。

（1）親が子の内容より大きい高さを与えること、
（2）子に背景色を付けること、
（3）RowのcrossAxisAlignmentをstretchにすること。

親の高さがすでに内容にぴったり合っている（＝余りの高さがない）場合や、子に背景がない場合は、適用しても解除しても変化は見えません（このときIntrinsicHeightは実質的に不要です）。

注記

IntrinsicHeightは子の固有の高さを計算するため、レイアウトのコストが比較的大きくなります。高さの異なる兄弟を揃えるときだけ使い、リストのように項目が多い場所では使用を避けてください。