Flutter中如何彻底移除Network Image的透明背景

在Flutter中直接通过Image.network无法移除图片透明背景，你可以通过以下两种方案实现需求：

方案一：使用image库修改图片源（永久修改） #

这个方案会先下载图片到内存，处理掉透明背景后再加载，适合需要保存处理后图片的场景。

1. 添加依赖到pubspec.yaml：

dependencies:
  image: ^4.0.17 # 可替换为最新版本
  http: ^1.1.0

2. 实现处理逻辑：

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:image/image.dart' as img;
import 'package:http/http.dart' as http;

class ProcessedImage extends StatefulWidget {
  const ProcessedImage({super.key});

  @override
  State<ProcessedImage> createState() => _ProcessedImageState();
}

class _ProcessedImageState extends State<ProcessedImage> {
  Uint8List? _processedImageBytes;

  @override
  void initState() {
    super.initState();
    _processImage();
  }

  Future<void> _processImage() async {
    // 下载图片
    final response = await http.get(Uri.parse("https://i.pinimg.com/474x/ca/4c/6b/ca4c6be8d049a58b46f9a52b2d69d764.jpg"));
    if (response.statusCode == 200) {
      // 解码图片
      img.Image? image = img.decodeImage(response.bodyBytes);
      if (image != null) {
        // 遍历每个像素，将透明区域替换为白色（可自定义颜色）
        for (int y = 0; y < image.height; y++) {
          for (int x = 0; x < image.width; x++) {
            int pixel = image.getPixel(x, y);
            if (img.getAlpha(pixel) < 255) {
              image.setPixel(x, y, img.ColorRgb8(255, 255, 255));
            }
          }
        }
        // 编码回字节流
        setState(() {
          _processedImageBytes = img.encodeJpg(image);
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return _processedImageBytes != null
        ? Image.memory(_processedImageBytes!)
        : const CircularProgressIndicator();
  }
}

方案二：使用ColorFiltered渲染时处理（临时修改） #

这个方案不需要修改图片源，只是在渲染时将透明区域与指定背景色混合，适合仅需展示效果的场景：

Image.network(
  "https://i.pinimg.com/474x/ca/4c/6b/ca4c6be8d049a58b46f9a52b2d69d764.jpg",
  color: Colors.white,
  colorBlendMode: BlendMode.color,
)

注意：如果图片包含半透明区域，这种方式会让半透明部分与白色混合，效果可能和直接替换像素略有不同。

内容的提问来源于stack exchange，提问作者Tejaswini Dev