La mejor práctica de FlutterComponent es elegir el color y realizarlo.

Crear interfaces de usuario personalizadas es genial. Su aplicación no necesita ser la misma para todos. Una manera fácil de personalizar su aplicación es extraer la paleta de colores del perfil del cliente/foto de portada.

lo hace

Primero, cargamos una imagen de una URL en una lista de bytes.

imageBytes = (await NetworkAssetBundle(Uri.parse(photo)).load(photo))
      .buffer
      .asUint8List();
复制代码

Luego, importamos Image lib para poder acceder a cada píxel sin preocuparnos por el formato de la imagen.

En el siguiente método, accedo a una malla de píxeles para poder elegir colores de diferentes partes de la imagen.

List<Color> extractPixelsColors(Uint8List? bytes) {
  List<Color> colors = [];

  List<int> values = bytes!.buffer.asUint8List();
  imageLib.Image? image = imageLib.decodeImage(values);

  List<int?> pixels = [];

  int? width = image?.width;
  int? height = image?.height;

  int xChunk = width! ~/ (noOfPixelsPerAxis + 1);
  int yChunk = height! ~/ (noOfPixelsPerAxis + 1);

  for (int j = 1; j < noOfPixelsPerAxis + 1; j++) {
    for (int i = 1; i < noOfPixelsPerAxis + 1; i++) {
      int? pixel = image?.getPixel(xChunk * i, yChunk * j);
      pixels.add(pixel);
      colors.add(abgrToColor(pixel!));
    }
  }

  return colors;
}
复制代码

Así es como se ve la cuadrícula si noOfPixelsPerAxis es 4.

En este ejemplo, extraeremos 16 píxeles.

Bien, ahora tenemos 16 colores, pero ¿qué podemos hacer con ellos? Necesitamos ordenarlos de alguna manera para poder extraer la paleta.

Ahora tratemos de ordenar los colores de claro a oscuro. Usamos el método computeLuminance, que es computacionalmente costoso, por lo que probablemente no deberíamos hacer los cálculos en el método de clasificación (múltiples cálculos para cada color), pero por el bien de este ejemplo, está bien.

List<Color> sortColors(List<Color> colors) {
  List<Color> sorted = [];

  sorted.addAll(colors);
  sorted.sort((a, b) => b.computeLuminance().compareTo(a.computeLuminance()));

  return sorted;
}
复制代码

Después de clasificar, nuestros colores se ven así.

Imagen más brillante al principio (arriba a la izquierda, más oscura al final, abajo a la derecha). Los tengo mostrados en una cuadrícula para que puedan caber fácilmente en la pantalla.

No necesitamos los 16 colores en la paleta, eso es demasiado, así que intentemos extraer 4 colores.

Para hacer esto, voy a dividir esta lista de 16 colores en 4 sublistas de 4 colores, y en cada sublista encontraré el color promedio que se convertirá en el elemento de nuestra lista final de colores de la paleta.

Color getAverageColor(List<Color> colors) {
  int r = 0, g = 0, b = 0;

  for (int i = 0; i < colors.length; i++) {
    r += colors[i].red;
    g += colors[i].green;
    b += colors[i].blue;
  }

  r = r ~/ colors.length;
  g = g ~/ colors.length;
  b = b ~/ colors.length;

  return Color.fromRGBO(r, g, b, 1);
}
复制代码

El color promedio se calcula sumando todos los componentes rojo, azul y verde y dividiendo la suma por la cantidad de colores agregados.

El primer color de la paleta (sin el 1 de la derecha) está formado por los primeros 4 colores (0, 1, 2, 3) de la lista ordenada, el segundo color es el 4, 5, 6, 7 y el Los tres colores son 8, 9, 10, 11 y el cuarto es 12, 13, 14, 15.

Para evitar que la interfaz de usuario sea bloqueada por estos cálculos pesados, utilizo el método de cálculo, que ejecuta su función en un aislamiento separado (un nuevo subproceso con memoria separada) y devuelve su resultado.

你从图像中提取的像素越多，就会花费更多的时间，所以要找到你要提取的最佳像素数。另外，图像越大，下载和解码的时间就越长。如果你能使用一些缩略图或你知道不是很大的图片，那将是最好的 :) 在下面的视频中，我提取了12x12=144像素，你可以看到它需要一两秒钟。

原文链接：mobileappcircular.com/how-to-extr…

源码地址：github.com/jelenalecic…

向大家推荐下我的网站 xuyisheng.top/ 专注 Android-Kotlin-Flutter 欢迎大家访问