【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 小时前
AI三大核心概念通俗指南:AIGC、Agent、MCP
人工智能·flutter·架构
火柴就是我7 小时前
每日见闻之Container Decoration
android·flutter
古希腊被code拿捏的神1 天前
【Flutter】面试记录
flutter·面试·职场和发展
nc_kai1 天前
Flutter 之 table_calendar 控件
flutter
0wioiw01 天前
Flutter基础(前端教程⑨-图片)
前端·flutter
Engandend1 天前
Flutter与iOS混合开发交互
flutter·ios·程序员
浅忆无痕1 天前
Flutter抓包
前端·flutter
火柴就是我1 天前
每日见闻之尝试大白话说清Flutter的事件传递
flutter
Lucifer晓1 天前
记录一次Flutter项目上传App Store Connect出现“Validation failed”错误的问题
flutter·ios
江上清风山间明月1 天前
一周掌握Flutter开发--10. 结构与设计模式
flutter·设计模式·快速