ピンチズーム Pinch to Zoom
2本指で広げると拡大、つまむと縮小、1本指で動かすと見る場所が移動する。
本物の 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