【Flutter】Rowの中身のサイズを一番大きいWidgetに揃える(IntrinsicHeight)

#Flutter#プログラミング入門#dart#Flutter入門
Rowで表示する中身の大きさが違うときに、サイズを揃える方法を紹介します。

body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.red,
child: const Text('A', style: TextStyle(fontSize: 30),),
),
Container(
color: Colors.blue,
child: const Text('B', style: TextStyle(fontSize: 150),),
),
],
)
このようにAとBのサイズは異なっていますが、AをBの大きさに拡大したいと思います。
そのためには、RowのcrossAxisAlignmentプロパティにCrossAxisAlignment.stretchを指定してIntrinsicHeightウィジェットで囲います。
IntrinsicHeight( // このWidgetで囲う
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch, // この行を追記
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.red,
child: const Text('A', style: TextStyle(fontSize: 30),),
),
Container(
color: Colors.blue,
child: const Text('B', style: TextStyle(fontSize: 150),),
),
],
),
)

ただし、このウィジェットは処理が重いので使用する場合はそのことに留意しましょう。