英文:
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
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,
),
),
),
)
输出:
将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:
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: <Color>[
Colors.red,
Colors.yellow,
Colors.blue,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论