Buscar pacotes, repositórios e categorias de apps

ducafecatGuia do ecossistema Flutter
Capa de swipe_image_gallery
Detalhes do pacotev0.11.0

swipe_image_gallery

Uma galeria rolável, fechável por deslizar e com zoom, na qual você pode adicionar uma sobreposição dinâmica.

AndroidiOSWebmacOSWindowsLinux
pub.dev Documentação da API Código-fonte
Downloads em 30 dias
11,1 mil
Curtidas
101
Pontos Pub
160

Instalar pacote

flutter pub add swipe_image_gallery

Visão geral do pacote

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

Swipe Image Gallery é um pacote Flutter que permite aos desenvolvedores criar galerias de imagens interativas com funcionalidades de deslizar para fechar, zoom e sobreposição dinâmica. Ele suporta múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux. A galeria permite aos usuários rolar pelas imagens, fechá-las por deslize e ampliar/reduzir para visualização detalhada. Os desenvolvedores podem personalizar a galeria com sobreposições dinâmicas, como texto ou ícones. Ideal para aplicativos de compartilhamento de fotos, apresentações de produtos ou qualquer app que exija navegação intuitiva de imagens.

Casos de uso

  • Aplicativos de compartilhamento de fotos
  • Visualizadores de imagens de produtos
  • Narrativa interativa
  • Fluxos de trabalho de revisão de imagens
  • exibições de álbum digital

Principais recursos

  • Funcionalidade de deslizar para descartar
  • Imagens ampliáveis
  • Suporte a sobreposição dinâmica
  • Compatibilidade multiplataforma
  • Controles de gestos personalizáveis
  • Experiência de rolagem suave

Indicado para

  • Galerias de imagens móveis e web
  • Aplicativos que precisam de descarte interativo de imagens
  • Desenvolvedores procurando interfaces de imagem personalizáveis
  • Projetos que exigem gestos de zoom e deslize
  • aplicações visuais centradas no UX

Considerações

  • Pode exigir otimização de desempenho para grandes conjuntos de imagens
  • O posicionamento de sobreposição pode exigir um gerenciamento cuidadoso do layout
  • Conflitos de gestos possíveis com outros widgets
  • Personalização limitada de animação embutida
  • Mais adequado para quantidades moderadas de imagens por galeria

README original

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

Swipe Image Gallery

Pub Version

A scrollable, dismissable by swiping, zoomable gallery on which you can add a dynamic overlay. While it is intended for an image gallery different types of widgets can also be used.

Installation

Add swipe_image_gallery as a dependency in your pubspec.yaml file.

Usage

With a List of Image Widgets
final assets = const [
  Image(image: AssetImage('assets/1.jpeg')),
  Image(image: AssetImage('assets/2.jpeg')),
  Image(image: AssetImage('assets/3.jpeg')),
  Image(image: AssetImage('assets/4.jpeg')),
];

...

SwipeImageGallery(
  context: context,
  children: assets,
).show();

Image Widgets

With a List of Widgets
final widgets = [
  Container(
    color: Colors.white,
    child: Center(
      child: Text('First Page', style: TextStyle(fontSize: 24.0)),
    ),
  ),
  Container(
    color: Colors.grey,
    child: Center(
      child: Text('Second Page', style: TextStyle(fontSize: 24.0)),
    ),
  ),
];

...

SwipeImageGallery(
  context: context,
  children: widgets,
).show();

Widgets

Using Builder
final urls = [
  'https://via.placeholder.com/400',
  'https://via.placeholder.com/800',
  'https://via.placeholder.com/900x350',
  'https://via.placeholder.com/1000',
  'https://via.placeholder.com/100',
];

...

SwipeImageGallery(
  context: context,
  itemBuilder: (context, index) {
    return Image.network(urls[index]);
  },
  itemCount: urls.length,
).show();
Add an Overlay

You can find the OverlayExample widget here.

  StreamController<Widget> overlayController =
      StreamController<Widget>.broadcast();

  @override
  void dispose() {
    overlayController.close();
    super.dispose();
  }

  ...

  SwipeImageGallery(
    context: context,
    children: remoteImages,
    onSwipe: (index) {
      overlayController.add(OverlayExample(
        title: '${index + 1}/${remoteImages.length}',
      ));
    },
    overlayController: overlayController,
    initialOverlay: OverlayExample(
      title: '1/${remoteImages.length}',
    ),
  ).show();

overlay

Hero Animation
final heroProperties = [
  ImageGalleryHeroProperties(tag: 'imageId1'),
  ImageGalleryHeroProperties(tag: 'imageId2'),
];

final assets = const [
  Image(image: AssetImage('assets/1.jpeg')),
  Image(image: AssetImage('assets/2.jpeg')),
];

...

Row(
  children: [
    Expanded(
      child: InkWell(
        onTap: () => SwipeImageGallery(
          context: context,
          children: assets,
          heroProperties: heroProperties,
        ).show(),
        child: Hero(
          tag: 'imageId1',
          child: Image(
            image: AssetImage('assets/1.jpeg'),
          ),
        ),
      ),
    ),
    Expanded(
      child: InkWell(
        onTap: () => SwipeImageGallery(
          context: context,
          children: assets,
          initialIndex: 1,
          heroProperties: heroProperties,
        ).show(),
        child: Hero(
          tag: 'imageId2',
          child: Image(
            image: AssetImage('assets/2.jpeg'),
          ),
        ),
      ),
    ),
  ],
),

hero

For more detailed examples you can check out the example project.

Categorias

Imagem

Repositório-fonte

Projetos que usam este pacote

Ainda não há dados.