Buscar pacotes, repositórios e categorias de apps

Repositório GitHubSametSahin10/full_screen_image

imagem em tela cheia

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

Capa do projeto imagem em tela cheia
Estrelas
1
Forks
5
Último push (UTC)
30 de ago. de 2022
Status do projeto
Ativo

README original

Texto original em inglês. Visite o GitHub para a versão atual.

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

Apache

SametSahin10 GitHub avatar
Autor no GitHub

SametSahin10 ↗

Software Developer

Mode Mobileİstanbul
LinguagensDartKotlinSwiftObjective-C

Pacotes publicados por este repositório

Dependências usadas

Lista de dependências 2 itens

  • flutter{"sdk":"flutter"}
  • flutter_testDesenvolvimento{"sdk":"flutter"}

Como escolher um repositório para seu projeto?

Filtre pelo caso de uso, compare a atividade e confira o projeto original antes de adotá-lo.

  1. Busque por nome, autor ou descrição e filtre por tema.
  2. Compare estrelas, forks e envios recentes. Estrelas indicam interesse, mas não garantem qualidade.
  3. Confira o README, a licença e as issues no GitHub antes de usar o projeto.

Fontes e manutenção

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗