如何更改图像颜色？

Question

如何更改图片颜色？

原图：

期待：

代码：

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

实际：

我尝试创建一些小部件并更改小部件中的图像颜色。但是，与预期不一样

你能帮我解决这个设计的一些问题吗？

Answer 1

为此，您可以使用 ColorFilitered 小部件。

无滤色器

Image.network("https://myImage"),

输出：

带颜色过滤器

ColorFiltered(
      colorFilter:
          ColorFilter.mode(Colors.teal.withOpacity(0.7), BlendMode.color),
      child: Image.network(
        "https://myUrl",
      ),
    );

输出：

您可以更改颜色及其不透明度，如您所见，还可以更改混合模式，更多关于混合模式 here