Flutter中如何将内置Icon或IconData转换为ui.Image？

Icon本质是基于字体文件渲染的矢量图形，要转换为ui.Image只需要将图标绘制到离线画布，再导出画布内容即可，无需引入第三方依赖。

通用转换代码 #

import 'dart:ui' as ui;
import 'package:flutter/material.dart';

Future<ui.Image> iconToImage(
  IconData iconData, {
  double size = 24,
  Color color = Colors.black,
  String? fontFamily,
  String? fontPackage,
}) async {
  final recorder = ui.PictureRecorder();
  final canvas = Canvas(recorder);
  final targetSize = size;

  // 配置图标对应的文本样式
  final textSpan = TextSpan(
    text: String.fromCharCode(iconData.codePoint),
    style: TextStyle(
      fontFamily: fontFamily ?? iconData.fontFamily,
      package: fontPackage ?? iconData.fontPackage,
      color: color,
      fontSize: targetSize,
      height: 1,
    ),
  );

  final textPainter = TextPainter(
    text: textSpan,
    textDirection: TextDirection.ltr,
  );

  // 布局并居中绘制图标
  textPainter.layout();
  textPainter.paint(
    canvas,
    Offset(
      (targetSize - textPainter.width) / 2,
      (targetSize - textPainter.height) / 2,
    ),
  );

  // 导出画布为ui.Image
  final picture = recorder.endRecording();
  return picture.toImage(targetSize.toInt(), targetSize.toInt());
}

调用示例 #

// 示例：将系统自带的首页图标转为大小64、蓝色的ui.Image
ui.Image homeIconImage = await iconToImage(
  Icons.home,
  size: 64,
  color: Colors.blue,
);

注意事项 #

• 转换操作是异步的，不可直接在同步的build方法里直接调用，建议提前转换缓存，或者用FutureBuilder包裹依赖该图片的组件
• 若生成的图标边缘模糊，可以将入参size设置为实际需要大小乘以当前设备的像素比（可通过MediaQuery.of(context).devicePixelRatio获取），使用时再缩放到对应尺寸即可
• 第三方图标库的IconData自带fontFamily和fontPackage属性，无需额外传入即可正确渲染

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