着色图像以进行叠加

Question

我想显示一瓶装满各种颜色液体的图像。颜色以RGB十六进制代码形式存在。因此，showBottle('#ff0000')应该显示装满红水的瓶子。我的想法是创建两个图像：瓶子（空），另一个仅用白色液体。然后可以将这两个图像放在另一个图像上，所以我只能将“液体部分”着色。

我的问题：

• 是否可以在Flutter中为图像“着色”？
• 使两个图像相互重叠的最佳方法是什么？

编辑： 我尝试将Stack小部件和两个Image小部件与colorBlendMode一起使用，但是透明度不起作用。参见下图：

Stack(children: <Widget>[
  Image.asset(
    'assets/images/background.png',
  ),
  Image.asset(
    'assets/images/overlay.png',
    colorBlendMode: BlendMode.color,
    color: Color.fromRGBO(255, 0, 0, 1.0),
  ),
])

将BlendMode更改为srcIn将导致考虑透明度，但会删除overlay.png图片中的所有信息。

Answer 1

使用图像混合模式和颜色。 这是例子，

Image.asset(
  'assets/image.jpg',
  height: 300,
  fit: BoxFit.fitHeight,
  color: _color, // Colors.red, Colors.yellow any color you want
  colorBlendMode: _blendMode, // BlendMode.color, BlendMode.darken, BlendMode.saturation, BlendMode.softLight
)

检查Image widget and its properties