color_extract

Color_extract

El extracto de color es un paquete de Flutter que le permite extraer y calcular los colores de los widgets de su aplicación. Puede usarlo para cambiar el color de un widget dependiendo/basado en el color del fondo (el otro widget detrás).

Avance

(El reproductor de video no puede mostrarse en pub.dev, consulte Github.com)

Preview.mp4

Manifestación

En esta demostración, ¿vea cómo puede hacer que su widget cambie los colores como un camaleón?

Instalación

Agregue lo siguiente a su pubspec.yaml :

 dependencies :
  color_extract : ^1.0.1

Luego ejecuta flutter pub get .

Uso

Colorextratista

El ColorExtractor es el widget del que queremos extraer el color promedio. Sirve como envoltorio para la repintación, por lo que puede utilizar el repintado como alternativa.

 ColorExtractor (
  boundaryKey : GlobalKey (),
  child : Container (
    width : 200 ,
    height : 200 ,
    color : Colors .red,
  ),
);

Coloravera

El widget ColorAverager calcula el color promedio de una porción específica de ColorExtractor o RepaintBoundary . Su aplicación es útil para determinar el color dominante de un área determinada, como el fondo detrás de un logotipo, la imagen.

 ColorAverager (
  boundaryKey : GlobalKey (),
  child : SizedBox (
    width : 50 ,
    height : 50 ,
  ),
  onChanged : (color) {
    // Handle the new average color.
  },
);

También puede usar el ColorAveragerController para calcular el color promedio programáticamente.

 final controller = ColorAveragerController ();

// ... render the widget ...

final avgColor = await controller. calculateAvgColor ();

Ejemplo

 import 'package:flutter/material.dart' ;
import 'package:color_extract/color_extract.dart' ;

class MyHomePage extends StatelessWidget {
  @override
  Widget build ( BuildContext context) {
    return Scaffold (
      body : Stack (
        children : [
          ColorExtractor (
            boundaryKey : boundaryKey,
            child : Container (
              width : 200 ,
              height : 200 ,
              color : Colors .blue,
            ),
          ),
          ColorAverager (
            // boundaryKey should be the same one in the above ColorExtractor boundaryKey
            boundaryKey : boundaryKey,
            // You can use the controller (ColorAveragerController) too.
            // controller: controller,
            child : const SizedBox (width : 50 , height : 50 ),
            onChanged : (color) {
                // Do something with the average color.
                // color should be = Colors.blue
            },
          )
        ],
      )
    );
  }
}

Autor

itisnajim, [email protected]

Licencia

color_extract está disponible bajo la licencia MIT. Consulte el archivo de licencia para obtener más información.