Flutter使用palette_generator提取图片色板后出现严重卡顿如何解决？

问题核心原因 #

• 图片解码、PaletteGenerator.fromImage 属于计算密集型操作，当前代码全部在主Isolate（UI线程）执行，会阻塞UI渲染导致卡顿；提取完成后如果未及时释放大内存的ui.Image对象，也会导致后续页面渲染掉帧。
• FutureBuilder的future参数直接绑定updatePalette()方法，每次页面重绘都会触发重新执行提取逻辑，重复消耗性能。

修复方案 #

1. 优化Future初始化

把提取调色板的Future存在State类中，仅在页面初始化时执行一次，避免重复调用：

// 在State类中定义
late Future<PaletteGenerator?> paletteFuture;

@override
void initState() {
  super.initState();
  paletteFuture = updatePalette();
}

// FutureBuilder绑定预先初始化的future
FutureBuilder<PaletteGenerator?>(
  future: paletteFuture,
  builder: (context, snapshot) {
    if (snapshot.hasData)
      return MyBottomSheet(wall: widget.wall, palette: snapshot.data);
    return LinearProgressIndicator();
  }
)

2. 压缩图片解码尺寸

调色板提取不需要高清图片，解码时直接降低分辨率，可大幅减少计算量：

Future<ui.Image> load(File file) async {
  var data = await file.readAsBytes();
  // 解码时限制最大宽高为200px，足够提取准确颜色
  ui.Codec codec = await ui.instantiateImageCodec(
    data,
    maxWidth: 200,
    maxHeight: 200,
  );
  ui.FrameInfo fi = await codec.getNextFrame();
  return fi.image;
}

3. 提取逻辑移到后台Isolate执行

计算密集型操作放到独立Isolate，不阻塞UI线程：

// 定义Isolate传入参数结构
class PaletteExtractParams {
  final Uint8List imageBytes;
  final int maxColorCount;
  PaletteExtractParams(this.imageBytes, this.maxColorCount);
}

// 顶层方法，用于子Isolate执行
Future<PaletteGenerator> extractPaletteInIsolate(PaletteExtractParams params) async {
  ui.Codec codec = await ui.instantiateImageCodec(
    params.imageBytes,
    maxWidth: 200,
    maxHeight: 200,
  );
  ui.FrameInfo fi = await codec.getNextFrame();
  final palette = await PaletteGenerator.fromImage(
    fi.image,
    maximumColorCount: params.maxColorCount,
  );
  fi.image.dispose(); // 及时释放图片内存
  return palette;
}

// 修改后的updatePalette方法
Future<PaletteGenerator?> updatePalette() async {
  var cache = DefaultCacheManager();
  File file = await cache.getSingleFile(widget.wall.url);
  Uint8List imageBytes = await file.readAsBytes();
  // 启动子Isolate执行计算
  final palette = await compute(
    extractPaletteInIsolate,
    PaletteExtractParams(imageBytes, 7),
  );
  return palette;
}

4. 及时释放资源

如果代码中持有ui.Image对象，提取完成后立即调用dispose()释放内存，避免内存占用过高导致后续掉帧。

以上方案落地后可完全消除UI卡顿和后续掉帧问题。

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