Flutterラボの

プレミアム会員になる

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

2021.12.05

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


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt