【Flutter】黑白图片

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

dart 复制代码
//第一种方法
              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的背景图片处理成黑白图片

dart 复制代码
              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),
                ),
              )
相关推荐
小红星闪啊闪2 小时前
Flutter开发 -- 需要了解的Dart知识
flutter
小李A_Z3 小时前
[Flutter]介绍些flutter的弹窗
flutter
小李A_Z3 小时前
[Flutter]介绍写Flutetr的按钮
flutter
恋猫de小郭8 小时前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
tangweiguo030519879 小时前
FlutterActivity vs FlutterFragmentActivity:全面对比与最佳实践
android·flutter
ITKEY_9 小时前
flutter日期选择国际化支持
开发语言·javascript·flutter
农夫三拳_有点甜9 小时前
Flutter SystemChrome 完整指南
flutter
葱段9 小时前
【Flutter】TextField 监听长按菜单粘贴点击事件
android·flutter·dart
2501_9197490311 小时前
flutter鸿蒙:使用flutter_local_notifications实现本地通知
flutter·华为·harmonyos
浮生若茶808820 小时前
Flutter环境搭建全攻略之-Macos环境搭建
flutter·macos