zoom_pinch_overlay

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

画像に対してInstagram風のピンチツーズームおよびグローバルドラッグ操作を可能にするFlutterウィジェットです。ユーザーは画像を画面内で自由に拡大・移動でき、写真ビューアーまたはインタラクティブな画像表示に最適です。オーバーレイはAndroid、iOS、Web、macOS、Windows、Linuxなど複数のプラットフォームをサポートしており、広範な互換性を確保しています。スムーズなジェスチャー処理により、ズームやパン操作に対する反応性と直感的なユーザー体験を提供します。

用途

インタラクティブな画像表示
写真ギャラリーの機能強化
ズーム可能な製品プレビュー
ジェスチャーによる画像ナビゲーション
デジタルアートの探求

主な機能

ピンチツーズーム機能
グローバルドラッグサポート
クロスプラットフォーム互換性
スムーズなアニメーションの遷移
カスタマイズ可能なオーバーレイ動作
応答性のあるタッチジェスチャー

適している対象

画像中心のアプリ
インタラクティブメディアビューア
EC商品表示
教育コンテンツツール
ユーザーインターフェースのプロトタイピング

注意事項

大きな画像に対してパフォーマンス最適化が必要になる可能性があります
組み込みのスタイリングオプションが限られている
複雑なマルチタッチシナリオには対応していません
低性能デバイスでの潜在的な遅延
ジェスチャーの衝突を慎重に処理する必要があります
すべてのターゲットプラットフォームでテストが必要です

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

An instagram style pinch and zoom widget for all platform completely written in pure dart!

All other "zoom_pinch" package didn't work for me because it doesnt appear on top of all other widgets which was an issue on one of my project. This package solves that problem by introducing a OverlayEntry so that it appears on top of all other widgets.

Credit to @billylev for the contribution this package.

Getting Started

Just wrap your widget that you want to be able to zoom in a ZoomOverlay

This is the values used in the video which can be found in the example folder.

ZoomOverlay(
    modalBarrierColor: Colors.black12, // Optional
    minScale: 0.5, // Optional
    maxScale: 3.0, // Optional
    animationCurve: Curves.fastOutSlowIn, // Defaults to fastOutSlowIn which mimics IOS instagram behavior
    animationDuration: Duration(milliseconds: 300), // Defaults to 100 Milliseconds. Recommended duration is 300 milliseconds for Curves.fastOutSlowIn
    twoTouchOnly: true, // Defaults to false
    onScaleStart: () {}, // optional VoidCallback
    onScaleStop: () {}, // optional VoidCallback
    child: CachedNetworkImage(
        imageUrl: imageUrl,
    ),
),

Documentations

parameter	documentation
`minScale`	Specifies the minimum multiplier it can scale outwards.
`maxScale`	Specifies the maximum multiplier the user can zoom inwards.
`twoTouchOnly`	specifies wither the zoom is enabled only with two fingers on the screen. Defaults to `false`.
`child`	A widget to make zoomable.
`animationDuration`	Specifies the duration when the zoom has ended and is animating back to it's original place. Defaults to `Duration(milliseconds: 100)`
`animationCurve`	Specifies the curve when the zoom has ended and is animating back to it's original place. Defaults to `Curves.fastOutSlowIn`
`modalBarrierColor`	Specifies the color of the background of the modal barrier.
`onScaleStart`	Function that gets called when scaling of the widget starts.
`onScaleStop`	Function that gets called when scaling of the widget stops.
`buildContextOverlayState`	Overrides the default overlay state.

Medium blog post

Read the accompanying article here for more info about this package.

カテゴリー・パッケージ・リポジトリを検索