Detalhes do pacotev2.0.0

full_screen_image

Visualizador de fotos em tela cheia. Desliga ao rolar verticalmente. Pode funcionar com o widget Hero.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 2,1 mil
Curtidas: 131
Pontos Pub: 130

Instalar pacote

flutter pub add full_screen_image

Visão geral do pacote

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

Um pacote Flutter para exibir imagens em tela cheia com uma interface suave e orientada por gestos. Ele se fecha automaticamente quando o usuário rola verticalmente, garantindo navegação intuitiva. O pacote oferece suporte à integração com o widget Hero para transições semelhantes entre telas. Projetado para simplicidade e desempenho em múltiplas plataformas, ele aprimora a experiência de visualização de imagens em aplicativos que priorizam conteúdo visual. Ideal para galerias, compartilhamento de fotos ou qualquer aplicativo que exija exibição imersiva de imagens.

Casos de uso

Visualizar fotos de alta resolução em galerias
Criando experiências imersivas de navegação por imagens
Implementando transições de herói com imagens
Construindo aplicativos de compartilhamento de fotos
Melhorando a narrativa visual em aplicativos
Exibindo imagens de produtos em tela cheia

Principais recursos

Auto-desaparecer ao rolar verticalmente
Compatibilidade do widget Hero
Suporte multiplataforma (Android, iOS, Web, macOS, Windows, Linux)
Integração simples com a interface existente
Gestos de toque suaves para navegação
Otimizado para desempenho e responsividade

Indicado para

Aplicativos de galeria de imagens
Plataformas de compartilhamento de fotos
Exibições de produtos de comércio eletrônico
Aplicações com conteúdo visual intenso
Desenvolvedores procurando visualizadores de imagem simples em tela cheia
Aplicativos que exigem transições de imagem suaves

Considerações

Opções limitadas de personalização além do comportamento básico
Pode exigir manipulação adicional para navegação complexa
Não projetado para interfaces de deslize de múltiplas imagens
Mais adequado para cenários de visualização de imagem única
Não inclui cache de imagem embutido
Requer gerenciamento manual do estado durante as transições

README original

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

Full Screen image

Full screen photo viewer. It shuts off when scrolling vertically. Can work with Hero widget

Installation

To use this plugin, add full_screen_image as a dependency in your pubspec.yaml file.

full_screen_image: any

Getting Started

Check out the example app using full_screen_image.

Flutter

Full screen image:

  FullScreenWidget(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16),
          child: Image.asset(
            "assets/image1.jpg",
            fit: BoxFit.cover,
          ),
        ),
      )

Full screen with hero:

FullScreenWidget(
        child: Hero(
          tag: "customTag",
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: Image.asset(
              "assets/image2.jpg",
              fit: BoxFit.cover,
            ),
          ),
        ),
      );

Small image:

if you don't want widget full screen then use center widget

 FullScreenWidget(
        child: Center(
          child: Hero(
            tag: "smallImage",
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                "assets/image3.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      );

Custom background color:

FullScreenWidget(
        backgroundColor: Colors.purple,
        child: Center(
          child: Hero(
            tag: "customBackground",
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                "assets/image3.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      );

Non transparent widget:

FullScreenWidget(
        backgroundColor: Colors.purple,
        backgroundIsTransparent: false,
        child: Center(
          child: Hero(
            tag: "nonTransparent",
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                "assets/image3.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      );

Custom widget:

  FullScreenWidget(
        child: SafeArea(
          child: Card(
            elevation: 4,
            child: Container(
              height: 350,
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: <Widget>[
                  Hero(
                    tag: "customWidget",
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(16),
                      child: Image.asset(
                        "assets/image3.jpg",
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 16,
                  ),
                  Text('Lorem text',style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold),),
                  SizedBox(
                    height: 16,
                  ),
                  Expanded(
                    child: Text(
                      lorem,
                    ),
                  ),

                ],
              ),
            ),
          ),
        ),
      );

License

Categorias

Repositório-fonte

Capa do projeto imagem em tela cheia

Furkankyl/full_screen_image

imagem em tela cheia

☆ 19 Estrelas⑂ 25 Forks

Projetos que usam este pacote

Ainda não há dados.