Detalhes do pacotev2.0.0

full_screen_image_null_safe

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: 842
Curtidas: 43
Pontos Pub: 130

Instalar pacote

flutter pub add full_screen_image_null_safe

Visão geral do pacote

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

Um pacote de visualizador de imagem em tela cheia para Flutter que se fecha automaticamente quando o usuário rola verticalmente. Suporta integração sem problemas com o widget Hero para transições suaves entre imagens. Projetado para ser seguro em relação a valores nulos e compatível com múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux. Ideal para aplicativos que exigem experiências imersivas de visualização de fotos com navegação baseada em gestos intuitivos.

Casos de uso

Visualizar imagens de alta resolução em tela cheia
Criando galerias de imagens com transições suaves
Integração com animações Hero para compartilhamento de imagens
Melhorando a navegação de fotos em dispositivos móveis e na web
Implementando o comportamento de deslize para descartar
Exibindo imagens em um modal de tela cheia

Principais recursos

Auto-desaparecer ao rolar verticalmente
Implementação Dart segura para nulos
Compatibilidade do widget Hero
Suporte multiplataforma (Android, iOS, Web, macOS, Windows, Linux)
Navegação baseada em gestos
Leve e fácil de integrar

Indicado para

Aplicativos de galeria de fotos para celular e web
Aplicações com muitas imagens
Aplicativos usando transições Hero
Desenvolvedores procurando visualizadores de imagem em tela cheia simples
Projetos que exigem exibição de imagem independente de plataforma
Usuários que querem navegação intuitiva de imagem

Considerações

Pode não suportar o fechamento por rolagem horizontal
Opções limitadas de personalização para gestos
Depende do contexto de rolagem pai para o fechamento
Mais adequado para visualizações de imagem única em vez de layouts complexos
Requer manipulação cuidadosa em visualizações de rolagem aninhadas
Não projetado para conteúdo de vídeo ou animado

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_null_safe as a dependency in your pubspec.yaml file.

full_screen_image_null_safe: 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

SametSahin10/full_screen_image

imagem em tela cheia

☆ 1 Estrelas⑂ 5 Forks

Projetos que usam este pacote

Ainda não há dados.