Question

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

Answer 1

您无法随心所欲。您需要使用图片编辑器来更改背景颜色。

如果要动态更改背景颜色，则首先必须通过向图像添加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',
          ),
        ),
      ),
    );
  }
}

Answer 2

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

从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/

Answer 3

就我而言，我试图为透明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,
)

Answer 4

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

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

您不需要borderRadius，但在我的情况下，我将ClipRRect与borderRadius一起使用。

Answer 5

我还试图为透明PNG

的背景添加颜色

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

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

我添加了一个边距，因此彩色背景只能在我的相框图像内看到。

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

5 个答案: