【Flutter】黑白图片

在这里插入图片描述

一、将图片处理成黑白图片

//第一种方法
              CachedNetworkImage(
                imageUrl: imageUrl,
                width: 80,
                height: 80,
                fit: BoxFit.cover,
                color: Colors.black,//目标颜色
                colorBlendMode: BlendMode.color,//颜色混合模式
              )
 //第二种方法
              ShaderMask(
                shaderCallback: (Rect bounds) {
   
                  return LinearGradient(colors: [Colors.black, Colors.white])
                      .createShader(bounds);
                },
                blendMode: BlendMode.color,
                child: CachedNetworkImage(
                    imageUrl: imageUrl,
                    width: 80,
                    height: 80,
                    fit: BoxFit.cover),
              )

二、将Container的背景图片处理成黑白图片

              Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage(
                        "https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"),
                    fit: BoxFit.cover,
                    colorFilter:
                        const ColorFilter.mode(Colors.black, BlendMode.color),
                  ),
                ),
                child: Center(
                  child: MyText.bodyMedium("Container背景图片",
                      color: Colors.pink, fontWeight: 700),
                ),
              )

相关推荐

  1. flutter压缩Uint8List图片大小】

    2023-12-23 08:28:02       62 阅读
  2. flutter获取本地图片高度、宽度

    2023-12-23 08:28:02       56 阅读
  3. flutter base64图片保存到相册

    2023-12-23 08:28:02       61 阅读
  4. Flutter如何正确使用图片资源

    2023-12-23 08:28:02       38 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-23 08:28:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-23 08:28:02       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-23 08:28:02       87 阅读
  4. Python语言-面向对象

    2023-12-23 08:28:02       96 阅读

热门阅读

  1. 【ES实战】ES6.7的tar包离线安装帮助手册

    2023-12-23 08:28:02       56 阅读
  2. Angular.js 实现带手柄自由调整页面大小的功能

    2023-12-23 08:28:02       56 阅读
  3. python开发:日志工具logging的使用

    2023-12-23 08:28:02       67 阅读
  4. Python高级语法与正则表达式

    2023-12-23 08:28:02       60 阅读
  5. Golang 在 Mac、Linux、Windows 下如何交叉编译

    2023-12-23 08:28:02       62 阅读
  6. 大数据开发职业规划

    2023-12-23 08:28:02       68 阅读
  7. Cmake

    Cmake

    2023-12-23 08:28:02      70 阅读
  8. 决策树相关算法_ID3_C45_信息熵_剪枝

    2023-12-23 08:28:02       61 阅读