如何在 Flutter 中为 CircleAvatar 赋予多种边框颜色？

Question

我想知道是否有一种简单的方法可以在 Flutter 中为圆形头像提供多种边框颜色。

如果您可以设置每种颜色填充的百分比，那就更好了。

这是我的意思的图像，但请注意，在 Figma 中这并不容易做到，因此颜色变得模糊。颜色混合实际上不是首选行为。

Answer 1

这就是我想到的。您可以更改颜色列表以匹配 Figma 渐变。

Container(
     height: 80,
     width: 80,
     decoration: const BoxDecoration(
           gradient: LinearGradient(colors: [
                Colors.green,
                Colors.yellow,
                Colors.red,
                Colors.purple
           ]),
      shape: BoxShape.circle),
      child: Padding(
            //this padding will be you border size
            padding: const EdgeInsets.all(3.0),
            child: Container(
                  decoration: const BoxDecoration(
                  color: Colors.white, shape: BoxShape.circle),
                        child: const CircleAvatar(
                        backgroundColor: Colors.white,
                        foregroundImage: NetworkImage("https://i.ibb.co/rkG8cCs/112921315-gettyimages-876284806.jpg"),
                   ),
            ),
      ),
),

Answer 2

这是您的解决方案，

Container(
                                  decoration: BoxDecoration(
                                      gradient: LinearGradient(
                                        begin: Alignment.topRight,
                                        end: Alignment.bottomLeft,
                                        colors: [
                                          Color(0XFF8134AF),
                                          Color(0XFFDD2A7B),
                                          Color(0XFFFEDA77),
                                          Color(0XFFF58529),
                                        ],
                                      ),
                                      shape: BoxShape.circle
                                  ),
                                  child: Container(
                                    decoration: BoxDecoration(
                                        color: Colors.white,
                                        shape: BoxShape.circle
                                    ),
                                    margin: EdgeInsets.all(2),
                                    child: Padding(
                                      padding: const EdgeInsets.all(3.0),
                                      child: CircleAvatar(
                                          radius: 25,
                                          backgroundColor: Colors.grey,
                                          backgroundImage: NetworkImage(reels[i].image)
                                      ),
                                    ),
                                  ),
                                ),

Answer 3

上述解决方案并没有完全达到我最初想要的效果，但无论如何还是谢谢！

这是我最终使用的代码。正是我想要的。希望有用。

    import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomPaint(
            painter: MulticolorBorderPainter(colors: [Colors.red, Colors.green, Colors.blue]),
            child: CircleAvatar(
              radius: 60,
              backgroundColor: Colors.transparent,
            ),
          ),
        ),
      ),
    );
  }
}

class MulticolorBorderPainter extends CustomPainter {
  final List<Color> colors;

  MulticolorBorderPainter({required this.colors});

  @override
  void paint(Canvas canvas, Size size) {
    double radius = size.width / 2;
    double segmentAngle = 2 * pi / colors.length;

    for (int i = 0; i < colors.length; i++) {
      final Paint paint = Paint()
        ..color = colors[i]
        ..style = PaintingStyle.stroke
        ..strokeWidth = 4.0;  // Adjust for border thickness

      final startAngle = i * segmentAngle;
      final sweepAngle = segmentAngle;

      canvas.drawArc(Rect.fromCircle(center: Offset(radius, radius), radius: radius), startAngle, sweepAngle, false, paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}