将 OutlineInputBorder 颜色更改为卡片的渐变

Question

我是 flutter 的新手。
如何向卡片中的 OutlineInputBorder 添加线性渐变？
就像图片中的这里一样，使用蓝色到紫色的渐变而不是纯蓝色边框。

编辑：
我不确定如何在 flutter
中做最小可重现的代码我希望这足够了。

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

Answer 1

一个好主意可能是使用带有渐变装饰的容器，其子项将是您想要概述的小部件。

这是一个例子：https://dev.to/valerianagit/create-a-rounded-container-with-a-gradient-border-36kb

Answer 2

您可以使用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(),
  ),
),
),

更多关于CustomPaint

将 OutlineInputBorder 颜色更改为卡片的渐变

Change OutlineInputBorder color to gradient for cards

gradient

dart

flutter