How to create Circle avatar with gradient color outline in flutter

Question

here is the example out put i want

here is what i tried

const CircleAvatar(
                      maxRadius: 40,
                      backgroundColor: AppColor.pink,
                      child: CircleAvatar(
                        maxRadius: 38,
                        backgroundColor: Colors.white,
                        child: Icon(
                          CupertinoIcons.heart_fill,
                          size: 50,
                          color: AppColor.pink,
                        ),
                      ),
                    )

but this is just normal color, there is no option to set gradient color in CircleAvatar, i looked over all solution, but i couldn't find a proper solution yet, thanks for your time

https://stackoverflow.com/questions/55395641/outlined-transparent-button-with-gradient-border-in-flutter — MANISH DAYMA, Apr 04 '23 at 05:00

score 1 · Accepted Answer · answered Apr 04 '23 at 06:53

Try this code:

Container(
              width: 80,
              height: 80,
              padding: EdgeInsets.all(2),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                gradient: LinearGradient(
                  colors: [
                    Colors.red,
                    Colors.blue,
                  ],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),

              ),
              child: CircleAvatar(
                radius: 40,
                backgroundColor: Colors.white,
                child: ShaderMask(
                  shaderCallback: (bounds) => LinearGradient(
                    colors: [Colors.pink, Colors.purple],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    stops: [0.0, 1.0],
                  ).createShader(bounds),
                  child: Icon(
                    CupertinoIcons.heart_fill,
                    size: 32,
                    color: Colors.white,
                  ),
                ),
              ),
            )

Output:

Wrap the CircleAvatar in a Container with a gradient property to create the gradient border effect, and wrap the Icon with a ShaderMask and set its shaderCallback property to a LinearGradient to apply the gradient effect to the icon.

I Hope this help!

thank you, clear and easy answer – mishalhaneef Apr 04 '23 at 07:15 — mishalhaneef, Apr 04 '23 at 07:15

score 0 · Answer 2 · answered Apr 04 '23 at 05:11

You can create a class and use it as you like see below example for your understanding Create a separate file for this class Note that this will give you gradient colors for icons

class GradientIcon extends StatelessWidget {
  GradientIcon(
    this.icon,
    this.size,
    this.gradient,
  );

  final IconData icon;
  final double size;
  final Gradient gradient;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      child: SizedBox(
        width: size * 1.2,
        height: size * 1.2,
        child: Icon(
          icon,
          size: size,
          color: Colors.white,
        ),
      ),
      shaderCallback: (Rect bounds) {
        final Rect rect = Rect.fromLTRB(0, 0, size, size);
        return gradient.createShader(rect);
      },
    );
  }
}

Then use it in you widget tree like

class IconSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GradientIcon(
      Icons.add_alert,
      50.0,
      LinearGradient(
        colors: <Color>[
          Colors.red,
          Colors.yellow,
          Colors.blue,
        ],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    );
  }
}

How to create Circle avatar with gradient color outline in flutter

2 Answers2