如何在flutter中使图像背景与页面颜色匹配

Question

这是figma的图像

在上面的屏幕中如何删除白色背景

这是我的代码

我尝试更改资产的颜色，这会改变整个图像的颜色，还尝试使用boxfit。我想实现figma设计中的页面。

Answer 1

由于要替换的颜色是白色，因此可以使用 ColorFiltered 来实现。 将您的 Image.asset(...) 包裹在 ColorFiltered 内，如下所示，

...
child: ColorFiltered(
  colorFilter: ColorFilter.mode(
    _yourBackgroundColor,
    BlendMode.srcATop,
  ),
  child: Image.asset(...),
),
...

BlendMode.srcATop 会将源图像合成到目标图像上，但只有在与目标图像重叠的位置，并且白色才会执行此操作。