Con Flutter es realmente sencillo crear interfaces customizadas en todos los sentidos, tal como hemos visto en algún que otro post anterior. Y también es un framework que incorpora muchas APIS que nos hacen que el modificar o adecuar las diferentes capas que forman nuestro widget sea algo muy sencillo.

Hoy vamos a repasar como podemos añadir gradientes de colores en el backgrounds de los widgets que utilizamos. Esto nos da una manera muy fácil de resaltar o de customizar cierta partes de nuestra aplicación con diseños espectaculares.

Básicamente Flutter nos provee tres tipos de gradientes, todos ellos muy customizables y con muchas opciones, para crear estos backgrounds de colores. Estas tres opciones son: LinearGradient, RadialGradient y SweepGradient.

Son tres clases diferentes pero que se utilizan de una forma muy similar. En los tres casos estos gradientes hay que implementarlos como hijos de un BoxDecoration, el widget del que dependen. En la jerarquía de widgets siempre existirá un BoxDecoration que posee una propiedad gradient, en la cual instanciaremos el tipo de gradiente que queramos utilizar.

LinearGradient en Flutter

Un degradado linear tiene dos puntos principales, begin y end. El punto de inicio corresponde a 0.0 y el punto final corresponde a 1.0. Estos puntos se expresan en fracciones, por lo que el mismo gradiente se puede reutilizar con cajas de diferentes tamaños sin cambiar los parámetros.

Los colores se describen mediante una lista de objetos tipo Color. Debe haber al menos dos colores. La región del lienzo antes del comienzo y después del final se colorea de acuerdo con tileMode.

child: Container(
  decoration: const BoxDecoration(
    gradient: const LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment(0.0, 1.0), // 10% of the width, so there are ten blinds.
      colors: const <Color>[
        Color(0xffee0000),
        Color(0xffeeee00),
      ], // red to yellow
      tileMode: TileMode.repeated, // repeats the gradient over the canvas
    ),
  ),
),

RadialGradient en Flutter

Un RadialGradient es otro de los gradientes en Flutter y el tipo normal tiene un centro y un radio. El punto central corresponde a 0.0 y el anillo en el radio desde el centro corresponde a 1.0. Estas longitudes se expresan en fracciones.

Los colores se describen mediante una lista de objetos Color. Debe haber al menos dos colores. La propiedad stops si se especifica, debe tener la misma longitud que los colores. Especifica fracciones del radio entre 0.0 y 1.0, dando anillos concéntricos para cada parada de color. Si es nulo, se supone una distribución uniforme.

La región del lienzo más allá del radio desde el centro se colorea de acuerdo con tileMode.

Widget radialGradient() {
  return Container(
    decoration: const BoxDecoration(
      gradient: const RadialGradient(
        center: Alignment.center,
        radius: .2,
        colors: <Color>[
          Color(0xffee0000),
          Color(0xffeeee00),
        ],
        stops: <double>[0.0, 1.0],
        // red to yellow
        tileMode: TileMode.repeated, // repeats the gradient over the canvas
      ),
    ),
  );
}

SweepGradient en Flutter

Este tipo de degradado tiene un center, un startAngle y un endAngle. StartAngle corresponde a 0.0 y endAngle corresponde a 1.0. Estos ángulos se expresan en radianes.

Los colores se describen mediante una lista de objetos Color. Debe haber al menos dos colores. La propiedad stops, si se especifica, debe tener la misma longitud que los colores. Especifica fracciones del vector de principio a fin, entre 0.0 y 1.0, para cada color. Si es nulo, se supone una distribución uniforme.

La región del lienzo antes de startAngle y después de endAngle se colorea según tileMode.

Widget sweepGradient() {
  return Container(
    decoration: const BoxDecoration(
      gradient: const SweepGradient(
          center: FractionalOffset.center,
          startAngle: 0.0,
          endAngle: pi * 2,
          colors: <Color>[
            Color(0xFF4285F4), // blue
            Color(0xFF34A853), // green
            Color(0xFFFBBC05), // yellow
            Color(0xFFEA4335), // red
            Color(0xFF4285F4), // blue again to seamlessly transition to the start
          ],
        stops: <double>[0.0, 0.25, 0.5, 0.75, 1.0],
      ),
    ),
  );