How to create a gradient border for a container

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.

Check this answer may help you https://stackoverflow.com/a/55638138/12413404 — esentis, Nov 17 '21 at 22:15
Ahh, thanks for posting this @esentis. I managed to reach a good solution which I'll post in a minute. — Martin, Nov 18 '21 at 15:03

score 0 · Answer 1 · answered Nov 18 '21 at 15:05

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);

How to create a gradient border for a container

1 Answers1