Close
  • Home
  • Flutter
  • Flutter – Crea una paleta de color personalizada usando MaterialColor
3.0 / 5

Flutter – Crea una paleta de color personalizada usando MaterialColor

1.084K
3

Actualmente en Flutter no hay un método incorporado que convierta un valor hexadecimal en una variable MaterialColor.

Aunque Flutter es definitivamente una excelente opción de marco cuando se trata de desarrollos móviles y web multi-plataforma, su capacidad para la manipulación del color aún no es una de sus características mas fuertes.

 

El parámetro primarySwatch , usa Material Design, nunca acepta variables que no sean el tipo MaterialColor . Esto es bastante complicado porque todos sabemos de la variedad de colores que puede proporcionarnos Material Concept de Google: ¡los mismos colores perezosos, aburridos y predefinidos como el ámbar , el índigo , el azul lima , el morado oscuro y el transparente !.

Asignar valores de color favorito (por ejemplo, #174378) a este parámetro con los metodos de Flutter es bastante complejo. Necesitamos un método que genere objetos MaterialColor personalizados a partir del entero hexadecimal. De ahí este truco.

 

MaterialColor createMaterialColor(Color color) {
  List strengths = <double>[.05];
  Map<int, Color> swatch = {};
  final int r = color.red, g = color.green, b = color.blue;

  for (int i = 1; i < 10; i++) {
    strengths.add(0.1 * i);
  }
  for (var strength in strengths) {
    final double ds = 0.5 - strength;
    swatch[(strength * 1000).round()] = Color.fromRGBO(
      r + ((ds < 0 ? r : (255 - r)) * ds).round(),
      g + ((ds < 0 ? g : (255 - g)) * ds).round(),
      b + ((ds < 0 ? b : (255 - b)) * ds).round(),
      1,
    );
  });
  return MaterialColor(color.value, swatch);
}

Este código es bastante entendible. Los diferentes valores de sombra de la muestra deben extenderse gradualmente. El umbral de 0,5 en la línea n.º 10 es importante porque el color real representado por un nuevo objeto MaterialColor debe ser idéntico a su propio shade500 .

Ahora debería poder usarlo como aquí.

muestra primaria: createMaterialColor(Color(0xFF174378))

¡ Y listo! Lo tenemos funcionando.

Espero que les sea de utilidad.

Saludos.

Tags:
THIS IS AN OPTIONAL

Related Post

0 Views

En este artículo, te explicaremos cómo cambiar la versión de Xcode en macOS cuando estás utiliz

2.899K Views

Hola buenas a todos, hoy vamos a ver una pequeña introducción a Flutter. Flutter es el nuevo fram

LEAVE YOUR COMMENTS