如何在Flutter中显示.ico或.icon格式的图片？

DevOps 小满

2026-8-3

在Flutter中显示.icon格式图片的解决方案

Flutter默认的Image组件对.icon格式的支持有限，你可以通过以下两种方式解决这个问题：

方法1：通过图片格式转换库处理

如果直接加载.icon无效，用image库将其转换成Flutter原生支持的格式（比如PNG）：

先在pubspec.yaml中添加依赖：

dependencies:
  image: ^4.0.17
  http: ^1.1.0 # 用于请求API资源

编写加载转换逻辑：

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

Future<Image> loadAndConvertIcon(String apiUrl) async {
  final response = await http.get(Uri.parse(apiUrl));
  if (response.statusCode == 200) {
    // 解码.icon数据
    final iconImg = img.decodeIcon(response.bodyBytes);
    // 转成PNG字节数据
    final pngBytes = img.encodePng(iconImg);
    return Image.memory(pngBytes);
  } else {
    throw Exception('加载.icon图片失败');
  }
}

在UI中用FutureBuilder展示：

FutureBuilder<Image>(
  future: loadAndConvertIcon('你的API接口地址'),
  builder: (ctx, snapshot) {
    if (snapshot.hasData) {
      return snapshot.data!;
    } else if (snapshot.hasError) {
      return const Icon(Icons.broken_image, size: 48);
    }
    return const CircularProgressIndicator();
  },
)

方法2：尝试直接加载（部分.icon兼容）

有些.icon文件本质是标准ICO格式，Flutter的Image.memory可能直接支持解码，可以先试这个简单方案：

FutureBuilder<Uint8List>(
  future: http.readBytes(Uri.parse('你的API接口地址')),
  builder: (ctx, snapshot) {
    if (snapshot.hasData) {
      return Image.memory(snapshot.data!);
    } else if (snapshot.hasError) {
      return const Icon(Icons.broken_image, size: 48);
    }
    return const CircularProgressIndicator();
  },
)