Flutter で画像読み込み時にガクッとならないように、画像サイズがわかる時は事前に高さを確保しておく

画像を表示する際、先に画像サイズがわかっている場合は以下のように高さを計算しあらかじめ高さを確保しておくと読み込み後に高さがガタッと変わることなく表示できて体験が良い。

なお以下は CachedNetworkImage を使っているが、LayoutBuilder で constraints.maxWidth をとりそれと画像の縦横比を比較し高さを算出している。これで画像サイズが動的に変化するとしても画面描画時に高さを確保できるのでガタッとならない。

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    double maxWidth = constraints.maxWidth;
    final ratio = (image.width ?? 0) / (image.height ?? 0);
    final height = maxWidth / ratio;
    return SizedBox(
      width: double.infinity,
      child: CachedNetworkImage(
        imageUrl: image.url,
        placeholder: (_, __) => SizedBox(
          height: height,
        ),
        fit: BoxFit.contain,
      ),
    );
  },
),