高さを自動に決めるウィジェットIntrinsicHeight！

本日紹介するウィジェットとはIntrinsicHeightです！

IntrinsicHeightとは？

IntrinsicHeight は 子ウィジェットの「本来の高さ（intrinsic height）」を計算して、それに合わせて親の高さを決めるウィジェット です。

つまり「中身がどのくらいの高さを必要としているか」をもとに、全体の高さを統一させます。

UIの見た目を揃えるために使う便利なウィジェットです。

なぜ使うのか？

特に Row を使って横に並べるときに、子ウィジェットの高さがバラバラだと見た目が揃わないことがあります。

例）左にテキスト（高さが小さい）
例）右に画像（高さが大きい）

そのままだと高さが違ってバラバラに見えます。
ここで IntrinsicHeight を使うと Row 全体の高さを「一番大きい子」に合わせて、他の子も伸びて揃う ようになります。

例コード

IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Container(color: Colors.red, height: 100, width: 50),
      Container(color: Colors.blue, height: 200, width: 50),
    ],
  ),
)

この場合、赤いコンテナ(100)は青いコンテナ(200)に合わせて高さ200まで伸びます。
結果として Row の中身がすべて同じ高さに揃う わけです。
つまり一番高い数字に合わせて子ウィジェットも変わります。

例コード２

import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: Scaffold(
       body: ListView(
         children: [
           _createDivider(),
           _createCell('test'),
           _createDivider(),
           _createCell('例えば\nこんな\n感じに\n高さが違う場合'),
           _createDivider(),
         ],
       ),
     ),
   );
 }

 Widget _createDivider() {
   return const Divider(
     height: 1,
     color: Colors.grey,
   );
 }

 Widget _createCell(String string) {
   return Row(
     children: [
       Container(
         width: 120,
         color: Colors.lightGreenAccent,
         alignment: Alignment.centerLeft,
         padding: const EdgeInsets.all(16.0),
         child: Text(
           'タイトル',
           style: const TextStyle(color: Colors.black, fontSize: 14),
         ),
       ),
       Container(
         padding: const EdgeInsets.all(16.0),
         child: Flexible(
           child: Text(
             string,
             textAlign: TextAlign.left,
             style: const TextStyle(color: Colors.black, fontSize: 14),
           ),
         ),
       ),
     ],
   );
 }
}

このコードを実行すると

このように2番目にタイトルがズレているところが見れます。

改善コード

import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: Scaffold(
       body: ListView(
         children: [
           _createDivider(),
           _createCell('test'),
           _createDivider(),
           _createCell('例えば\nこんな\n感じに\n高さが違う場合'),
           _createDivider(),
         ],
       ),
     ),
   );
 }

 Widget _createDivider() {
   return const Divider(
     height: 1,
     color: Colors.grey,
   );
 }

 Widget _createCell(String string) {
   return IntrinsicHeight(
     child: Row(
       children: [
         Container(
           width: 120,
           color: Colors.lightGreenAccent,
           alignment: Alignment.centerLeft,
           padding: const EdgeInsets.all(16.0),
           child: Text(
             'タイトル',
             style: const TextStyle(color: Colors.black, fontSize: 14),
           ),
         ),
         Container(
           padding: const EdgeInsets.all(16.0),
           child: Flexible(
             child: Text(
               string,
               textAlign: TextAlign.left,
               style: const TextStyle(color: Colors.black, fontSize: 14),
             ),
           ),
         ),
       ],
     ),
   );
 }
}

Containerを囲んでいるRowにIntrinsicHeightを囲んであげることで簡単に改善できます。

ズレていた2番目のタイトルがきれいになりました。

このようによく使えばチャットなどで右側にプロフィールがあってメッセージを入力しても変な感じなく自然に見せることができます！