套件詳情v4.0.2

image_pixels

讓您擴展圖像的背景顏色，或建立任何依賴於圖像寬度/高度或像素顏色的組件。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 3750
喜歡數: 102
Pub 分數: 150

安裝套件

flutter pub add image_pixels

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

image_pixels 套件讓開發者能夠擴展影像的背景顏色，或建立依賴於影像尺寸與像素顏色的元件。它提供在像素層級分析與操作影像的工具，非常適合自訂視覺效果、動態背景以及基於影像內容的響應式 UI。此套件支援多個平台，包括 Android、iOS、Web、macOS、Windows 與 Linux，確保廣泛的相容性。以效能與簡潔為重點，可透過 pub.dev 隨意整合至 Flutter 專案中。

適用情境

動態背景顏色擴展
基於圖像尺寸建立小工具
像素級圖像分析
具有影像資料的響應式 UI
自定視覺效果
基於圖像的佈局調整

主要特色

擴展圖像的背景顏色
分析像素顏色
支援圖像寬度/高度依賴
跨平台相容性
輕便高效
與 Flutter 的輕鬆整合

適合對象

開發圖像驅動的使用者介面的開發者
需要像素級精確佈局的設計師
需要動態圖像背景的應用程式
具有響應式圖像組件的項目
Flutter 應用針對多個平台

使用建議

需要在像素分析之前載入影像
大圖像的性能影響
僅限靜態圖像處理
不適用於即時影片
最佳搭配預加載的影像使用
可能需要額外快取以供重複使用

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

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.