Change OutlineInputBorder color to gradient for cards-CodePudding

I am very new to flutter.
How do I add linear gradient to OutlineInputBorder in a card ?
Like here in the image use a blue to purple gradient instead of the solid blue border.

edit:
I am not sure how to do minimally reproducible code in flutter
I hope this is enough.

  Widget build(BuildContext context) {
    return const Center(
      child: Card(
        shape: OutlineInputBorder(borderSide: BorderSide(color: Colors.blue)),
        child: Padding(padding: EdgeInsets.all(10),child: Text('abc')),
      ),
    );
  }

CodePudding user response：

You can use CustomPaint

class BorderPaint extends CustomPainter {
  final double thinckness;
  final Radius radius;
  BorderPaint({
    this.thinckness = 8.0,
    this.radius = const Radius.circular(12),
  });
  @override
  void paint(Canvas canvas, Size size) {
    final Offset center = Offset(size.width / 2, size.height / 2);
    final Rect rectMaxSized =
        Rect.fromCenter(center: center, width: size.width, height: size.height);
    final Rect innerSpace = Rect.fromCenter(
        center: center,
        width: size.width - thinckness * 2,
        height: size.height - thinckness * 2);

    final Paint paint = Paint()
      ..shader = const LinearGradient(colors: [
        Colors.cyanAccent,
        Colors.pinkAccent,
      ], begin: Alignment.centerLeft, end: Alignment.bottomRight)
          .createShader(rectMaxSized);

    canvas.drawDRRect(
        RRect.fromRectAndCorners(rectMaxSized,
            bottomLeft: radius,
            bottomRight: radius,
            topLeft: radius,
            topRight: radius),
        RRect.fromRectAndCorners(innerSpace,
            bottomLeft: radius,
            bottomRight: radius,
            topLeft: radius,
            topRight: radius),
        paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

child: SizedBox(
  width: 300, // if you have inner child
  height: 100,
  child: CustomPaint(
    size: const Size(300, 100),
    painter: BorderPaint(),
  ),
),
),

More about CustomPaint

CodePudding user response：

A good idea could be to use a Container with a gradient decoration, whose child would be the widget you want to have outlined.

Here's an example of this: https://dev.to/valerianagit/create-a-rounded-container-with-a-gradient-border-36kb