zoom_pinch_overlay

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um widget Flutter que habilita interações de zoom com pinça e arrasto global estilo Instagram para imagens. Permite aos usuários dimensionar e mover livremente uma imagem na tela, sendo ideal para visualizadores de fotos ou exibições interativas de imagens. O overlay é compatível com múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, garantindo ampla compatibilidade. Desenvolvido com tratamento suave de gestos, oferece uma experiência do usuário responsiva e intuitiva para zoom e panorâmica.

Casos de uso

Visualização interativa de imagens
Melhorias na galeria de fotos
Visualizações ampliáveis de produtos
Navegação de imagem baseada em gestos
Exploração de arte digital

Principais recursos

Funcionalidade de zoom com pinça
Suporte de arrastar global
Compatibilidade multiplataforma
Transições de animação suaves
Comportamento de sobreposição personalizável
Gestos de toque responsivos

Indicado para

Aplicativos com muitas imagens
Visualizadores de mídia interativa
Exibições de produtos de comércio eletrônico
Ferramentas de conteúdo educacional
prototipagem de interface do usuário

Considerações

Pode exigir otimização de desempenho para imagens grandes
Opções limitadas de estilo embutido
Não projetado para cenários complexos de multi-toque
Atraso potencial em dispositivos de baixa gama
Requer manipulação cuidadosa de conflitos de gestos
Necessita de testes em todas as plataformas-alvo

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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.

Buscar categorias, pacotes e repositórios