在Flutter中如何创建具有渐变颜色轮廓的圆形头像

huangapple go评论78阅读模式
英文:

How to create Circle avatar with gradient color outline in flutter

问题

这是我想要的示例输出。

我尝试过以下代码:

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

但这只是普通的颜色,没有选项可以设置CircleAvatar的渐变颜色。我查看了所有的解决方案,但仍然找不到合适的解决方案,谢谢您的时间。

英文:

here is the example out put i want

在Flutter中如何创建具有渐变颜色轮廓的圆形头像

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

答案1

得分: 1

尝试这段代码:

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

输出:

在Flutter中如何创建具有渐变颜色轮廓的圆形头像

CircleAvatar包裹在一个具有渐变属性的Container中,以创建渐变边框效果,并将Icon包裹在ShaderMask中,将其shaderCallback属性设置为LinearGradient,以将渐变效果应用于图标。

希望这对你有帮助!

英文:

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:

在Flutter中如何创建具有渐变颜色轮廓的圆形头像

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!

答案2

得分: 0

你可以创建一个类并按照你的需要使用它,参见下面的示例以便更好地理解。为这个类创建一个单独的文件。请注意,这将为你的图标提供渐变颜色。

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

然后在你的控件树中使用它,就像这样:

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,
      ),
    );
  }
}
英文:

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: &lt;Color&gt;[
          Colors.red,
          Colors.yellow,
          Colors.blue,
        ],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    );
  }
}

huangapple
  • 本文由 发表于 2023年4月4日 12:52:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/75925619.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定