如何改变图像颜色？

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

输出：

您可以更改颜色及其不透明度（如您所见）以及混合模式，更多有关混合模式的信息请参见此处