Flutterラボ
【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),),
      ),
    ],
  ),
)

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

Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech