Gradiente en aplicaciones Flutter

Los degradados se consideran elementos llamativos en UI/UX y diseño gráfico. Tener elementos degradados en sus aplicaciones realmente puede exaltar su aplicación en términos de experiencia y sensación del usuario.

En este tutorial, veremos cómo podemos implementar gradientes en flutter.

Flutter ofrece 3 tipos de gradientes:

1. Gradiente lineal
2. Gradiente radial
3. Gradiente de barrido

Nota: Para implementar cualquier tipo de degradado, necesitamos hacer uso de Box Decoration. El constructor Box Decoration se puede asignar a la propiedad de decoración de Containers.

Constructor de decoración de cajas:

const BoxDecoration(
{Color? color,
DecorationImage? image,
BoxBorder? border,
BorderRadiusGeometry? borderRadius,
List<BoxShadow>? boxShadow,
Gradient? gradient,
BlendMode? backgroundBlendMode,
BoxShape shape = BoxShape.rectangle}
)

Para agregar degradados a nuestro widget, usaremos la propiedad de degradado del constructor BoxDecoration . La propiedad gradiente acepta tres constructores : Gradiente lineal, Gradiente radial y Gradiente de barrido.

De los tres, Lineal y Radial son los más preferidos, sin embargo, Sweep ofrece más control. 

Comencemos con el degradado lineal. Comencemos mirando el constructor de gradiente lineal:

LinearGradient (
{
    AlignmentGeometry begin = Alignment.centerLeft,
    AlignmentGeometry end = Alignment.centerRight, 
    required List<Color> colors, 
    List<double>? stops, 
    TileMode tileMode = TileMode.clamp, 
    GradientTransform? Transform
}
)

Desde el constructor, está claro que se requieren los colores del argumento . De forma predeterminada, los valores de las propiedades de inicio y fin se establecen en centerLeft y centerRight respectivamente.

Los parámetros de inicio y fin definen la ruta de nuestro gradiente lineal. Inicio se refiere a donde comienza el camino y el final se refiere a donde termina.

Los parámetros begin y end aceptan los siguientes valores:

• centroizquierda
• centro
• ceterRight
• arriba a la izquierda
• centro Superior
• parte superior derecha
• abajo a la izquierda
• parte inferior central
• abajo a la derecha

También puede usar el valor de Alineación (x, y) . Aquí, el valor x representa el desplazamiento en el eje X y el valor y representa el desplazamiento en el eje Y. Obtendrá una comprensión clara al mirar la imagen a continuación que muestra todas las alineaciones posibles en aleteo con respecto a los gradientes.

(x, y):

El parámetro de las paradas :

La lista de paradas no es un widget obligatorio. La lista de paradas especifica las fracciones del vector de principio a fin. El parámetro paradas toma una Lista de valores entre 0.0 y 1.0 para cada color. Si el parámetro de paradas no se menciona o es nulo, se aplica una distribución uniforme.

Hagamos un contenedor con un degradado lineal.

child: Container(
           height: MediaQuery.of(context).size.height * 0.7,
           width: MediaQuery.of(context).size.width * 0.9,
             // Below is the code for Linear Gradient.
           decoration: const BoxDecoration(
               gradient: LinearGradient(
               colors: [Colors.purple, Colors.blue],
              begin: Alignment.bottomLeft,
               end: Alignment.topRight,
          ),
        ),
      )

 
 En el ejemplo anterior, hemos visto cómo agregar un degradado a un contenedor.

En el ejemplo anterior, configuramos la ruta del degradado desde abajo a la izquierda hasta arriba a la derecha  y configuramos solo 2 colores, mientras que puede agregar cualquier cantidad de colores a la lista. La mejor práctica es agregar no más de 3 colores. 

La razón para no agregar más colores es que con demasiados colores, el degradado se vuelve nítido. No habrá una transición suave de los colores y se verá torpe.

Así es como implementas un degradado lineal en aleteo. Aunque no hemos usado propiedades como paradas, modo mosaico y transformación, nuestro degradado aún se ve mejor, esa es la belleza del aleteo.

Gradiente lineal

Ahora verá qué hace exactamente las paradas y el modo de mosaico .

child: Container(
                  height: MediaQuery.of(context).size.height * 0.7,
                  width: MediaQuery.of(context).size.width * 0.9,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    gradient: const LinearGradient(
                      colors: [Colors.purple, Colors.blueAccent],
                      begin: Alignment.bottomLeft,
                      end: Alignment.topRight,
                      stops: [0.4, 0.7],
                      tileMode: TileMode.repeated,
                    ),
                  ),
                )

El código anterior se ve así:

Gradiente lineal con paradas y modo mosaico

 Esto se trata de gradientes lineales.

Ahora pasemos a Gradiente radial:

Como se aprendió, BoxDecoration también usa la clase RadialGradient . Un degradado radial es similar a un degradado lineal pero, como sugiere el nombre, el degradado es radial (circular). Muestra un degradado en círculos concéntricos. Por lo tanto, un gradiente radial tiene un centro y un radio. El punto central tiene un valor de 0,0 y el radio oscila entre 0,0 y 1,0 unidades. Estas longitudes se procesan como fracciones, lo que nos permite usar el mismo código para cualquier forma de caja con cambios mínimos o, en general, sin cambios.

Echemos un vistazo al constructor de Radial Gradient. 

RadialGradient({
    AlignmentGeometry center = Alignment.center,
    double radius = 0.5,
    required List<Color> colors,
    List<double>? stops,
    TileMode tileMode = TileMode.clamp,
    AlignmentGeometry? focal,
    double focalRadius = 0.0,
    GradientTransform? transform
})

Del constructor, está claro que la propiedad de colores es obligatoria y, de forma predeterminada, la alineación se establece en el centro y el radio se establece en 0,5 (píxeles).

Hagamos un contenedor con Radial Gradient : 

child: Container(
            height: MediaQuery.of(context).size.height * 0.7,
            width: MediaQuery.of(context).size.width * 0.9,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                gradient: const RadialGradient(
                    colors: [Colors.red, Colors.yellow],
                    radius: 0.75,
                   ),
            ),
        ),

 
Lo anterior se ve así:

Gradiente radial

Las paradas y el modo mosaico tienen las mismas aplicaciones que hemos discutido en Liner Gradients. Agregar paradas le dará la capacidad de controlar la ruta del degradado con mucha precisión y le permitirá tener la forma deseada.

De forma predeterminada, si no mencionamos la alineación, se establece en el centro. También podemos alterar la alineación de la siguiente manera: 

child: Container(
            height: MediaQuery.of(context).size.height * 0.7,
            width: MediaQuery.of(context).size.width * 0.9,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                gradient: const RadialGradient(
                    colors: [Colors.red, Colors.yellow],
                    radius: 0.75,
                    focal: Alignment(0.7, -0.7),
                    tileMode: TileMode.clamp,
                ),
            ),
           ),

 
 El código anterior se ve así:
 

Gradiente radial con paradas y modo mosaico

Se trata de degradados radiales en Flutter.

Pasemos a Barrido de degradados. Como sugiere el nombre, el degradado de barrido muestra un degradado en un arco de barrido alrededor de un punto central.

Echemos un vistazo al constructor de SweepGradient:

SweepGradient(
{AlignmentGeometry center = Alignment.center,
double startAngle = 0.0,
double endAngle = math.pi * 2,
required List<Color> colors,
List<double>? stops,
TileMode tileMode = TileMode.clamp,
GradientTransform? transform}
)

Está claro que se requieren los colores del argumento, y el argumento de los colores no debe ser nulo si se proporciona un argumento de paradas . De forma predeterminada, la alineación, startAngle y endAngle se establecen en center, 0.0 y 2*pi respectivamente. 

Como hemos visto en Linear Gradient y Radial Gradient, los valores de parada van de 0,0 a 1,0. En el caso de Sweep Gradient, el degradado sigue un arco, por lo que aquí nos ocupamos de los ángulos. startAngle se refiere al punto en el que se coloca la parada 0.0 del degradado y, de manera similar, endAngle se refiere al punto en el que se coloca la parada 1.0 del degradado. Los ángulos inicial y final se miden en radianes. Nota: si la lista de paradas es nula , se asume una distribución uniforme .

Veamos cómo hacer un SweepGradient: 

child: Container (
             height: MediaQuery.of(context).size.height * 0.7,
             width: MediaQuery.of(context).size.width * 0.9,
             decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(20),
             gradient: const SweepGradient(
                        colors: [
                              Colors.red,
                              Colors.yellow,
                              Colors.blue,
                              Colors.green,
                              Colors.red,
                       ],
                       stops: <double>[0.0, 0.25, 0.5, 0.75, 1.0],
                       tileMode: TileMode.clamp,
              ),
       ),

 
El código anterior se vería así: 

Barrido de degradado sin ángulos inicial y final.

En el código anterior, podemos ver lo fácil que es crear un SweepGradient en flutter con un número mínimo. de líneas de código. En el código anterior, no mencionamos las propiedades startAngle y endAngle porque los valores predeterminados 0.0 y t 2π son exactamente lo que queríamos. Si desea cambiar el ángulo, puede hacerlo como desee. Para usar la constante π, simplemente importe la biblioteca matemática a su archivo de trabajo y use la constante necesaria. Siga los pasos a continuación. 

import 'dart:math' as math;

Para usar el elemento matemático requerido en su proyecto. Por ahora π: 

void main() {
    print(math.pi * 4);
}

Con ángulos de inicio y parada personalizados, el degradado se vería así: 

child: Container(
             height: MediaQuery.of(context).size.height * 0.7,
            width: MediaQuery.of(context).size.width * 0.9,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                gradient: const SweepGradient(
                    startAngle: math.pi * 0.2,
                    endAngle: math.pi * 1.7,
                    colors: [
                              Colors.red,
                              Colors.yellow,
                              Colors.blue,
                              Colors.green,
                              Colors.red,
                    ],
                    stops: <double>[0.0, 0.25, 0.5, 0.75, 1.0],
                    tileMode: TileMode.clamp,
                 ),
            ),
        ),

 El código anterior se vería así: 

Gradiente de barrido con ángulos de inicio y parada personalizados.

Así es como se trabaja con gradiente en aleteo. Los degradados se pueden aplicar a toda la pantalla de su aplicación. Para aplicar el degradado a toda la pantalla, simplemente asigne un widget de contenedor a su parámetro de cuerpo , proporcione el ancho y la altura del contenedor como double.infinity y double.infinity respectivamente, de esta manera puede aplicar un degradado a toda su aplicación.