【Flutter】画像を拡大して任意の箇所を表示するには？

画像を拡大して任意の箇所を表示するには？

大きい画像の中から特定の部分を拡大表示しつつ、56x56の枠にキレイに収めて見せたいとなり、
ハマりまくったので備忘録でかきこ。

画像の特定の部分を表示するイメージです。
証明写真とかなら顔だけ指定した枠内で表示する様なイメージかつ、元の画像が小さいので拡大して見れるようにしちゃうみたいな感じです。

下記はコードになります。

SizedBox(
      // 実際のサイズ
      width: 56,
      height: 56,
      child: ClipRect(
        // 枠からはみ出さないようする
        child: Transform.translate(
          offset: const Offset(-2, 25), //  左に2px、下に25px
          child: Transform.scale(
            scale: 1.9,
            child: Image.network(
              // 画像拡大しているので画像サイズは大きめにとる
              width: 200,
              height: 200,
              'https://asset/mmuge/rage/hoge.png',
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    ),

分解して1つずつ説明

SizedBox(width: 56, height: 56)

SizedBox(
  width: 56,
  height: 56,

🔹意味：
表示エリア（= 枠の大きさ）を 56x56ピクセルに固定してる。

🔹なぜ必要？
→ ここで「切り取るサイズ」を決めてる。
→ この枠の外に画像がはみ出しても、あとで ClipRect で見えなくする。

ClipRect(child: ...)

child: ClipRect(

🔹意味：
SizedBox で決めたサイズからはみ出した部分をカットする。
画像がどんなに大きくても、この枠内だけが表示される。

🔹なぜ使う？
→ Transform.scale や Transform.translate で画像が動いたり拡大されても、
　 見えるのは常に56x56の中だけにしたいから。

Transform.translate(offset: Offset(-2, 25))

child: Transform.translate(
  offset: Offset(-2, 25),

🔹意味：
画像を 左に2px、下に25pxズラして表示する。

🔹なぜズラす？
→ 「画像のこの辺を見せたい」っていう調整がこれでできる。
→ たとえば下の方を見せたいなど。

🧠注意：
ここでズラしても、見えるのは ClipRect の範囲内だけ。
ズラした部分だけ「見える場所が変わる」って感じ

Transform.scale(scale: 1.9)

child: Transform.scale(
  scale: 1.9,

🔹意味：
画像を 1.9倍に拡大する。

🔹なぜ拡大する？
→ 大きな画像をズームして「一部分だけを強調して見せたい」から。

🔹注意：
この拡大も、ClipRect のおかげで枠内だけ表示される。

Image.network(...)

Image.network(
  width: 200,
  height: 200,
   'https://asset/mmuge/rage/hoge.png',
  fit: BoxFit.cover,
),

🔹意味：
APIから画像を表示してる。
サイズは 200x200 で指定して、ちょっと大きめに描画してる。

🔹なぜ width/height を200に？
→ Transform.scale で拡大するから、もとが小さいと拡大しても粗くなったりズレたりする。
→ だから、少し大きめにしておくのが吉。

🔹fit: BoxFit.cover の意味：
→ 枠にぴったり収まるように切り取って表示する。
（この場合は実際には ClipRect で制限されるから、大きくてもOK）

まとめ 全体として何してる？

Image.network → 画像読み込み（200x200で描画）

Transform.scale → 拡大（1.9倍）

Transform.translate → 好きな位置へズラす

ClipRect → はみ出しをカット

SizedBox → 最終的な表示サイズ（56x56）に制限！

200x200の大きな画像から、任意の場所を1.9倍でズームして、きっちり56x56で表示。

以上！！！