How do you give a CircleAvatar multiple border colors in Flutter?

user_11121782 0
Viewed 562

I'm wondering if there is a simple way to give a circle avatar multiple border colors in Flutter.

Bonus if you could set the % you want each color to fill.

Here is an image of what I mean, but note it wasn't that easy to do in Figma, hence the blurring of the colors. Color blending actually would not be the preferred behavior.

enter image description here

flutter-layout flutter
2 Answers

This is what came to my mind. You can change the color list to match the Figma gradient.

enter image description here

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"),
                   ),
            ),
      ),
),
user_80426040

Here is your solution,

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)
                                      ),
                                    ),
                                  ),
                                ),
user_183603210
Related