如何为容器创建渐变边框

Question

I'm trying to replicate the following behavior:

Specifically the gradient on the border. I can easily copy this behavior by using two Containers stacked on each other: one that holds the radial-gradient (for the border) and another on top which is the background color. However, that doesn't work for me as I want the background color to be partially transparent so the content below this card is somewhat visible.

How else would you approach this? Use some sort of custom paint? Last case scenario I can just import the png and use it as a background but wanted to make this in code.

PS: You can create the following gradient by using a RadialGradient where the center is the same as the rectangle's center.

Answer 1

So I managed to do this by simply using a CustomPainter to create the border. Turns out it's pretty straightforward. Thanks to @esentis for helping out!

final gradient = RadialGradient(
  colors: [
    ThemeColors.BLUE,
    Colors.white.withAlphaPercent(0),
  ],
  radius: 1,
  center: Alignment.center,
);

final start = Offset(size.width * 0, size.height * 0);
final end = Offset(size.width * 1, size.height * 1);
final center = Offset(size.width * 0.5, size.height * 0.5);

final rect = Rect.fromPoints(start, end);
final rRect = RRect.fromRectAndRadius(rect, Radius.circular(12));
final paint = Paint()
  ..strokeWidth = 6
  ..style = PaintingStyle.stroke
  ..shader = gradient.createShader(Rect.fromCircle(
    center: center,
    radius: size.width * 0.5,
  ));

canvas.drawRRect(rRect, paint);