Change OutlineInputBorder color to gradient for cards

Question

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')),
      ),
    );
  }

Please, provide a code example of this card in orden to provide proper help — Luis Utrera, Feb 04 '22 at 16:34
You can use this reference.Hope this will work for you.Thanks [link of resorces](https://stackoverflow.com/questions/55395641/outlined-transparent-button-with-gradient-border-in-flutter) — Vishal_VE, Feb 04 '22 at 19:08

score 3 · Accepted Answer · answered Feb 04 '22 at 18:33

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

Glad to help you out; you can also check `ClipPath` widget. – Md. Yeasin Sheikh Feb 04 '22 at 19:17 — Md. Yeasin Sheikh, Feb 04 '22 at 19:17

score 0 · Answer 2 · answered Feb 04 '22 at 17:50

0

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

answered Feb 04 '22 at 17:50

Luis Utrera

942
6
15

Change OutlineInputBorder color to gradient for cards

2 Answers2