Detalhes do pacotev4.0.2

image_pixels

Permite estender a cor de fundo de uma imagem ou criar qualquer widget que dependa da largura/altura da imagem ou da cor de seus pixels.

AndroidiOSWebmacOSWindowsLinux

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

Downloads em 30 dias: 3,8 mil
Curtidas: 102
Pontos Pub: 150

Instalar pacote

flutter pub add image_pixels

Visão geral do pacote

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

O pacote image_pixels permite que desenvolvedores ampliem a cor de fundo de uma imagem ou criem widgets que dependam das dimensões da imagem e das cores dos pixels. Ele fornece ferramentas para analisar e manipular imagens ao nível de pixel, tornando-o ideal para efeitos visuais personalizados, fundos dinâmicos e interfaces responsivas baseadas no conteúdo da imagem. O pacote suporta múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, garantindo ampla compatibilidade. Com foco em desempenho e simplicidade, integra-se perfeitamente aos projetos Flutter por meio do pub.dev.

Casos de uso

Extensão de cor de fundo dinâmica
Criando widgets com base nas dimensões da imagem
Análise de imagem a nível de pixel
Interfaces responsivas com dados de imagem
efeitos visuais personalizados
Ajustes de layout baseados em imagem

Principais recursos

Estende a cor de fundo das imagens
Analisa cores de pixels
Suporta dependências de largura/altura da imagem
Compatibilidade multiplataforma
Leve e eficiente
Integração fácil com o Flutter

Indicado para

Desenvolvedores construindo interfaces do usuário baseadas em imagens
Designers que precisam de layouts perfeitos em pixels
Aplicativos que exigem fundos de imagem dinâmicos
Projetos com componentes de imagem responsivos
Aplicativos Flutter direcionados a múltiplas plataformas

Considerações

Requer carregamento de imagem antes da análise de pixels
Impacto no desempenho com imagens grandes
Limitado ao processamento de imagem estática
Não adequado para vídeo ao vivo
Melhor usado com imagens pré-carregadas
Pode ser necessário armazenamento em cache adicional para uso repetido

README original

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

Sponsor

image_pixels

This package allows you to build a widget that depends on, or uses the values of:

The width and height of some image, or
The colors of your image pixels

Try running the Example.

Extend the background-color of an image

The ImagePixels.container() constructor adds a background-color that is the same color as the image pixel at the colorAlignment position.

For example, suppose you put an image inside a Container, like this:

Container(
    width: 250,
    height: 100,                           
    alignment: Alignment.center,
    child: 
        Container(    
            width: 40.0, 
            height: 60.0, 
            child: Image(image: myImageProvider),
        ),
);

Now, if you wrap it with an ImagePixels.container:

ImagePixels.container(
    imageProvider: myImageProvider,    
    colorAlignment: Alignment.topLeft,
    child: 
        Container(
            width: 250,
            height: 100,                           
            alignment: Alignment.center,
            child: 
                Container(    
                    width: 40.0, 
                    height: 60.0, 
                    child: Image(image: myImageProvider),
                ),
        );
);

Using a builder

The ImagePixels constructor lets you define an image through an imageProvider, and then use a builder to build a child widget that depends on the image dimensions and the color of its pixels.

The default constructor lets you provide the imageProvider, the builder, as well as a defaultColor to be used when reading pixels outside the image bounds or while the image is still downloading.

For example, this will display the size of the image as a Text widget:

ImagePixels(
    imageProvider: imageProvider,
    defaultColor: Colors.grey,
    builder: (context, img) => Text("Img size is: ${img.width} × ${img.height}"),
    );

Builder parameters

The builder function gives you access to an img parameter of type ImgDetails, with the following information:

If the image is already available, img.hasImage is true, and img.width and img.height indicate the image dimensions.
While the image is not yet available, img.hasImage is false, and img.width and img.height are null.
The functions img.pixelColorAt() and img.pixelColorAtAlignment() can be used in the builder body to read the color of the image pixels.
If the coordinates point to outside the image, or if the image is not yet available (is still being downloaded or failed to download), then these functions will return the defaultColor provided in the ImagePixels constructor.
The img.uiImage parameter contains the image as a ui.Image type. It will be null while the image is still downloading.
The img.byteData parameter contains the image as a ByteData type. It will be null while the image is still downloading.

Other use cases

Getting the tapped pixel color: By wrapping the child of the ImagePixel with a GestureDetector you can obtain the x/y position where the user tapped the image. From this information, you can then determine the color of the tapped pixel. Try running the Example.
Modifying the image: The child of the ImagePixel can be a CustomPainter. Then, you can use a canvas to paint whatever you want on top of the image, or else create an entirely new image from the pixels of the original image.