在 Flutter 中更改图像的背景颜色答案

【问题标题】：Changing Background Color Of Image in Flutter在 Flutter 中更改图像的背景颜色
【发布时间】：2018-10-22 05:13:54
【问题描述】：

我们可以在 Flutter 中更改图像的背景颜色吗？就像在这张图片中一样，我想将粉色背景颜色更改为其他颜色。

【问题讨论】：

你想要真正实现什么。图像编辑或只是小部件背景
请添加更多信息。
像这张图片有黑色矩形我想把它改成不同的颜色。这样我就可以在不使用许多图像的情况下绘制不同的颜色图案。
我的情况是我想要一些不同的东西，我想为图像显示背景颜色，在该图像上看起来很完美，这意味着主导图像的颜色就是它。喜欢在高音上
我有一个透明背景 png 图像，想将背景颜色设置为白色并将图像保存为 jpg 格式。我该怎么办？

【解决方案1】：

我知道这是一个老问题，但对于那些来自谷歌的问题。

从 Flutter 1.9 开始，现在可以使用小部件 ColorFiltered。

 body: Center(
        child: ColorFiltered(
          child:Image.network(
                      "https://cdn.pixabay.com/photo/2019/12/14/07/21/mountain-4694346_960_720.png",
                    ),
          colorFilter: ColorFilter.mode(Colors.red, BlendMode.color),
        
      ),

完整示例，作者：Rashid： https://flutterforyou.com/how-to-change-color-of-an-image-in-flutter/

【讨论】：

【解决方案2】：

就我而言，我试图为 透明 PNG

着色

我尝试了this solution，它正在工作。

使用 ShaderMask 类 (https://docs.flutter.io/flutter/widgets/ShaderMask-class.html)

例子：

ShaderMask(
  child: Image(
    image: AssetImage("assets/cat.png"),
  ),
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.blue, Colors.lightBlue],
      stops: [
        0.0,
        0.5,
      ],
    ).createShader(bounds);
  },
  blendMode: BlendMode.srcATop,
)

【讨论】：

我有一个透明背景 png 图像，想将背景颜色设置为白色并将图像保存为 jpg 格式。我该怎么办？

【解决方案3】：

通过将图像包装到 container 中，然后在 SVG 文件中添加颜色，并使用 flutter_svg 包，有一个颜色参数可以填充您选择的颜色

                       child: Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              shape: BoxShape.circle
                            ),
                            child: SvgPicture.asset('assets/images/plus.svg',
                            color: Color(0xff280D78)),
                          ),

【讨论】：

【解决方案4】：

你不能用颤振来做到这一点。您需要一个图像编辑器来更改背景颜色。

如果您想动态更改背景颜色，您首先必须通过向图像添加 Alpha 通道蒙版来使背景透明（再次使用图像编辑器）然后，您将能够通过将图像放入具有背景颜色的小部件中来定义背景颜色。

这是一个完整的示例应用程序。重新加载小部件时，背景颜色会随机变化。

import 'dart:math';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Color randomColor() =>
      Color((Random().nextDouble() * 0xFFFFFF).toInt() << 0).withOpacity(1.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      home: Center(
        child: Container(
          decoration: BoxDecoration(
            color: randomColor(),
          ),
          child: Image.network(
            'https://i.stack.imgur.com/O02Ip.png',
          ),
        ),
      ),
    );
  }
}

【讨论】：

我正在解码图像并应用颜色并再次对其进行编码，但它无法正常工作......我正在寻求帮助plugin
您不需要第三方插件来更改图像的背景颜色。我已将我的代码示例扩展为一个完整的示例应用程序，您可以将其用作起点。
我已经应用了这个..在我的情况下，每次我点击某些东西或每次热重载时颜色都会改变@Soundbytes
@urvashi 你是对的。每当重绘小部件时，bg-color 都会发生变化。要实现最初声明的行为，您必须使用 MyApp 成员变量并在初始化程序中重置它。我已将您的更正添加到我的原始文章中。
我有一个透明背景 png 图像，想将背景颜色设置为白色并将图像保存为 jpg 格式。我该怎么办？

【解决方案5】：

我想出了这个解决方案。因此，您可以包含小部件，然后用颜色装饰容器。

Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              color: Colors.black,
            ),
            child: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Image(
                  image: AssetImage(imageLink),
                ),
              
            ),
          ),

您不需要borderRadius，但在我的例子中，我使用了带有borderRadius 的ClipRRect。

【讨论】：

【解决方案6】：

我还尝试为 透明 PNG

的背景添加颜色

这可以通过使用 stack widget 来完成，如下所示：

Stack(
   children: <Widget>[
     Container(
       width: double.infinity,
       height: double.infinity,
       margin: EdgeInsets.all(50),
       color: Colors.blue[500],
     ),
     Image.asset(
       'images/frame.png',
        fit: BoxFit.fill,
     ),
   ],
 )

我添加了边距，因此彩色背景仅在我的相框图像中可见。

【讨论】：