Flutter Web中使用Icon组件在ListView时出现内存泄漏问题

问题本质 #

这是Flutter 3.7.x稳定版Web端在处理Material字体图标时的资源回收bug，并非你的代码写法错误。Material Icons在Web端基于字体文件渲染，滚动列表时未正确释放相关渲染资源，导致内存持续上涨；而Text组件不存在这类字体渲染的特殊资源缓存逻辑，因此无泄漏问题。

解决方案 #

1. 升级Flutter版本到3.10+

官方在后续稳定版中优化了Web端字体图标的内存管理，此类问题已被修复。执行升级命令：

flutter upgrade

2. 替换Material Icons为SVG图标

用本地SVG资源替代字体图标，避免字体渲染的资源泄漏问题。示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

void main() {
  runApp(const MaterialApp(
    home: Scaffold(body: MemoryTest()),
  ));
}

class MemoryTest extends StatelessWidget {
  const MemoryTest({super.key});
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 500,
      itemBuilder: (context, index) => SvgPicture.asset(
        'assets/circle.svg', // 本地SVG资源路径
        width: 24,
        height: 24,
        color: Theme.of(context).iconTheme.color,
      ),
    );
  }
}

需在pubspec.yaml中添加flutter_svg依赖，并将SVG文件放入对应资源目录。

3. 使用图片图标替代字体图标

用ImageIcon配合本地图片资源，完全规避字体渲染逻辑：

itemBuilder: (context, index) => ImageIcon(
  AssetImage('assets/circle_icon.png'),
  size: 24,
)

补充说明 #

该问题在debug和release模式下均出现，说明是框架层面的通用问题，而非debug模式的调试资源导致。优先推荐升级Flutter版本，若暂时无法升级，可采用SVG/图片替代方案快速规避。

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