【Flutterレイアウト】IntrinsicHeightとIntrinsicWidthでサイズをお揃える

IntrinsicHeight、IntrinsicWidthとは

IntrinsicHeight、IntrinsicWidthを使う際、下記の４つのメソッドが呼び出されて、UIを描画している。IntrinsicHeightの応用の場面としては、子たちの高さやサイズを揃えたい時です。

@override
  double computeMinIntrinsicWidth(double height) {
    if (child != null)
      return child!.getMinIntrinsicWidth(height);
    return 0.0;
  }

  @override
  double computeMaxIntrinsicWidth(double height) {
    if (child != null)
      return child!.getMaxIntrinsicWidth(height);
    return 0.0;
  }

  @override
  double computeMinIntrinsicHeight(double width) {
    if (child != null)
      return child!.getMinIntrinsicHeight(width);
    return 0.0;
  }

  @override
  double computeMaxIntrinsicHeight(double width) {
    if (child != null)
      return child!.getMaxIntrinsicHeight(width);
    return 0.0;
  }

constraints制約について

RenderIntrinsicWidthクラスに下記の記述があります。要するに、constraintsの制約が厳しめの場合、IntrinsicHeight、IntrinsicWidthが機能しません。うまくいかない時は焦らず、ソースコードをチェックしましょう。とはいえ、親からの制約あるということはサイズ決められていることです。IntrinsicHeight を使う意味がなくなっています、現実的は存在しないと思います。
※constraintsの制約突破について、前の記事をご参考ください。

      if (!constraints.hasTightWidth) {
        final double width = child!.getMaxIntrinsicWidth(constraints.maxHeight);
        assert(width.isFinite);
        constraints = constraints.tighten(width: _applyStep(width, _stepWidth));
      }
      if (_stepHeight != null) {
        final double height = child!.getMaxIntrinsicHeight(constraints.maxWidth);
        assert(height.isFinite);
        constraints = constraints.tighten(height: _applyStep(height, _stepHeight));
      }
      return layoutChild(child!, constraints);

使い方

return Scaffold(
      appBar: AppBar(
        title: const Text('Demo'),
      ),
      body: Align(
        alignment: Alignment.topRight,
        child: IntrinsicHeight(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: 40,
                height: 120,
                color: Colors.red,
              ),
              Container(
                width: 40,
                height: 80,
                color: Colors.blue,
              ),
              Container(
                width: 40,
                color: Colors.green,
              ),
            ],
          ),
        ),
      ),
    );

IntrinsicHeightありとなしの効果比較

あり	なし

上記の例で、IntrinsicHeightは、高さ未定の子たちはお互いの高さを合わせて、描画していることはわかる。