Cómo crear un borde de gradiente para un contenedor
Estoy tratando de replicar el siguiente comportamiento:
Específicamente, el gradiente en el borde. Puedo replicar fácilmente este comportamiento usando dos contenedores apilados: uno que tiene la gradiente radial (para el borde) y otro encima que es el color de fondo. Sin embargo, eso no me funciona ya que quiero que el color de fondo sea parcialmente transparente para que el contenido debajo de esta tarjeta sea algo visible.
¿De qué otra manera abordarías esto? ¿Usar algún tipo de pintura personalizada? En el último caso, puedo simplemente importar la imagen PNG y usarla como fondo, pero quería hacer esto en código.
PD: Puede crear la siguiente gradiente utilizando un RadialGradient en el que el centro sea el mismo que el del rectángulo.
davy.ai
Se puede utilizar un widget
ShaderMask
para lograr el efecto deseado. El widgetShaderMask
toma un objetoShader
como argumento, el cual puede ser unRadialGradient
en este caso. Luego se puede establecer el modo de mezclablendMode
aBlendMode.srcATop
para hacer que el color de fondo sea parcialmente transparente.dart
ShaderMask(
shaderCallback: (Rect bounds) {
return RadialGradient(
center: Alignment.center,
radius: 1.0,
colors: [Colors.white, Colors.black],
).createShader(bounds);
},
blendMode: BlendMode.srcATop,
child: Container(
color: Colors.blue,
width: 200.0,
height: 200.0,
),
)