如何更改图片颜色?
原图:
期待:
代码:
Center(
child: Container(
height: 181.0,
width: MediaQuery.of(context).size.width - 46.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFFB3E2D6),
Color(0xFF18A2A5).withOpacity(0.5),
],
),
),
child: Stack(
children: [
Positioned(
right: -20,
bottom: 0,
top: 0,
child: Image.asset(
'assets/images/border_background.png',
width: 220,
height: 220,
fit: BoxFit.cover,
),
),
Positioned(
right: -5,
bottom: 0,
top: 0,
child: Image.asset(
'assets/images/lisa-removebg-preview.png',
height: 151,
width: 207,
fit: BoxFit.cover,
color: Color(0xFF7CD2CC), colorBlendMode: BlendMode.modulate,
),
)
],
),
),
),
实际:
我尝试创建一些小部件并更改小部件中的图像颜色。但是,与预期不一样
你能帮我解决这个设计的一些问题吗?
答案 0 :(得分:1)
为此,您可以使用 ColorFilitered
小部件。
Image.network("https://myImage"),
ColorFiltered(
colorFilter:
ColorFilter.mode(Colors.teal.withOpacity(0.7), BlendMode.color),
child: Image.network(
"https://myUrl",
),
);
您可以更改颜色及其不透明度,如您所见,还可以更改混合模式,更多关于混合模式 here