颤振-如何将图像与渐变颜色混合?

使用堆栈来获得这种效果非常简单。

   Stack(children: <Widget>[
        Container(
          decoration: BoxDecoration(
            color: Colors.transparent,
            image: DecorationImage(
              fit: BoxFit.fill,
              image: AssetImage(
                'images/bg.jpg',
              ),
            ),
          ),
          height: 350.0,
        ),
        Container(
          height: 350.0,
          decoration: BoxDecoration(
              color: Colors.white,
              gradient: LinearGradient(
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: [
                    Colors.grey.withOpacity(0.0),
                    Colors.black,
                  ],
                  stops: [
                    0.0,
                    1.0
                  ])),
        )
      ]),  

干杯

你也可以试试这个:

ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.red.withOpacity(0.4), BlendMode.srcOver),
  child: YourWidget(),
) 

我的解决方案是用shaderMask包装我的图像,这是一个对我有用的例子

ShaderMask(
  shaderCallback: (bounds) {
    return LinearGradient(
      colors: node.badge!.colorsArray,
    ).createShader(bounds);
  },
  child: Image.asset(
    Assets.main_logo,
    height: 27.0,
    fit: BoxFit.cover,
  ),
  blendMode: BlendMode.srcATop,
),

如果参考BlendMode文档 https://docs.flutter.io/flutter/dart-ui/BlendMode-class.html ,你可以找到你需要的东西

编辑

这个 const double scale = 2.04015; 在浏览器中运行“颤振”时,ontly工作。对于移动设备,使用 const double scale = 0;

=================================================

三年半后,我参加了聚会,但我注意到,没有一个答案能够理解想要的效果是什么。因此,让我们首先分析想要的结果,然后编写代码。

梯度贴图

这种效果被称为“渐变贴图”,因为每个像素值都在变化 映射 到 坡度 基于预定义的一组颜色。

让我们看一看。如果输入是灰度图像, Color color1 = Colors.blue 和 Color color2 = Colors.purple ,各个像素的颜色应按以下方式进行变换-

哪里

• 黑色像素颜色-转换为蓝色
• 白色像素颜色-转换为紫色
• 中间颜色-转换为蓝色和紫色之间的适当颜色

密码

我最初的想法是拍摄一张图片,把它解码成 Uint8List 使用 getBytes() ,处理列表,最后将其编码回png。 虽然这种方法有效,但它远没有达到实时用例的性能。

因此,第二种可行的方法是使用颜色矩阵创建效果-

class GradientMap extends StatelessWidget {

  final Color color1;
  final Color color2;
  final double contrast;
  final ImageProvider imageProvider;

  const GradientMap({
    this.color1 = Colors.white,
    this.color2 = Colors.black,
    this.contrast = 0,
    required this.imageProvider,
    Key? key
  }) : super(key: key);


  ColorFilter grayscaleMatrix() => ColorFilter.matrix([
    0.2126,       0.7152,       0.0722,       0, 0,
    0.2126,       0.7152,       0.0722,       0, 0,
    0.2126,       0.7152,       0.0722,       0, 0,
    contrast-0.4, contrast-0.4, contrast-0.4, 1, 0,
  ]);


  ColorFilter invertMatrix() => const ColorFilter.matrix([
    -1,  0,  0, 0, 255,
     0, -1,  0, 0, 255,
     0,  0, -1, 0, 255,
     0,  0,  0, 1, 0,
  ]);


  ColorFilter tintMatrix () {
    final int r = color2.red;
    final int g = color2.green;
    final int b = color2.blue;

    final double rTint = r / 255;
    final double gTint = g / 255;
    final double bTint = b / 255;

    const double scale = 2.04015; // Use 0 on mobile instead
    const double translate = 1 - scale * 0.5;

    return ColorFilter.matrix(<double>[
      (rTint * scale), (rTint * scale), (rTint * scale), (0), (r * translate),
      (gTint * scale), (gTint * scale), (gTint * scale), (0), (g * translate),
      (bTint * scale), (bTint * scale), (bTint * scale), (0), (b * translate),
      (0            ), (0            ), (0            ), (1), (0            ),
    ]);
  }


  @override
  Widget build(BuildContext context) {
    return Container(
      color: color1,
      child: ColorFiltered(
        colorFilter: tintMatrix(),
        child: ColorFiltered(
          colorFilter: invertMatrix(),
          child: ColorFiltered(
            colorFilter: grayscaleMatrix(),
            child: Image(image: imageProvider)),
        ),
      ),
    );
  }
}

或者,您可以组合 grayscaleMatrix() 和 invertMatrix() 变成一个,这样就不需要第三个了 ColorFiltered() 小装置。

该小部件将数据作为输入

• color1 -打火机 Color
• color2 -黑暗的 颜色
• contrast - double color1和color2之间的混合
• imageProvider -图像提供者,例如 AssetImage() 或 NetworkImage()

并显示转换后的图像。

用法

只需按照以下方式使用此小部件包装ImageProvider-

GradientMap(
  color1: Color.fromRGBO(158, 80, 254, 1),
  color2: Color.fromRGBO(15, 4, 192, 1),
  contrast: 0,
  imageProvider: NetworkImage("https://i.imgur.com/C5xknx8.png"),
)

缺点

虽然这种方法性能良好,但用户无法控制两种输入颜色之间的混合算法。 此外,小部件只接受两种颜色作为输入。这消除了使用多色渐变的可能性。