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
ShaderMaskpara lograr el efecto deseado. El widgetShaderMasktoma un objetoShadercomo argumento, el cual puede ser unRadialGradienten este caso. Luego se puede establecer el modo de mezclablendModeaBlendMode.srcAToppara 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,
),
)