個人開発者が勉強がてらまとめているだけのサイトです

ピンチズーム Pinch to Zoom

2本指で広げると拡大、つまむと縮小、1本指で動かすと見る場所が移動する。

別名
ピンチイン/ピンチアウト拡大縮小ズームビューパンとズームPan and Zoom
動き
2本指で広げるドラッグで移動
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます(初回は数秒かかります)

別タブで大きく開く ↗

どんなもの?

写真ビューアや地図、図面の閲覧で使う動きです。

InteractiveViewer で囲むだけで、ピンチ・ドラッグ・PCのホイール操作まで対応します。

minScale / maxScale で拡大できる範囲を決めます。

TransformationController を渡しておくと、「元の大きさに戻す」ボタンやダブルタップで拡大などを後から足せます。

こんなときに

  • 写真・地図・図面・グラフなど、細部を見たいもの

避けたい場面

  • 文字が中心の画面(拡大させるより、文字サイズ設定に従わせる)

最小コード

final controller = TransformationController();

InteractiveViewer(
  transformationController: controller,
  minScale: 1,
  maxScale: 6,
  child: Image.asset('map.png'),
);

// 元の大きさに戻す
controller.value = Matrix4.identity();

使うウィジェット

InteractiveViewerTransformationController

似ているもの・一緒に見たいもの