zoom_pinch_overlay

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

이미지에 인스타그램 스타일의 핀치 줌 및 글로벌 드래그 상호작용을 가능하게 하는 플러터 위젯입니다. 사용자가 이미지를 화면에서 자유롭게 확대하고 이동할 수 있게 하여 사진 뷰어나 인터랙티브 이미지 표시에 적합합니다. 오버레이 기능은 안드로이드, iOS, 웹, 맥OS, 윈도우, 리눅스 등 여러 플랫폼을 지원하여 광범위한 호환성을 보장합니다. 부드러운 제스처 처리를 통해 줌과 패닝에 대한 반응성 있고 직관적인 사용자 경험을 제공합니다.

사용 사례

인터랙티브 이미지 보기
사진 갤러리 개선
확대 가능한 제품 미리보기
제스처 기반 이미지 탐색
디지털 아트 탐구

주요 기능

핀치 줌 기능
글로벌 드래그 지원
크로스 플랫폼 호환성
부드러운 애니메이션 전환
사용자 정의 오버레이 동작
반응성 있는 터치 제스처

적합한 대상

이미지 중심 앱
인터랙티브 미디어 뷰어
전자상거래 제품 전시
교육 콘텐츠 도구
사용자 인터페이스 프로토타이핑

고려 사항

큰 이미지에 대한 성능 최적화가 필요할 수 있습니다
제한된 내장 스타일링 옵션
복잡한 멀티터치 시나리오를 위한 설계가 아님
저사양 기기에서 지연 발생 가능성
제스처 충돌을 신중하게 다뤄야 합니다
모든 대상 플랫폼에서 테스트가 필요합니다

원본 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.

패키지, 저장소 및 앱 카테고리 검색