从图像加载调色板后极度滞后

Question

我目前正在用 Flutter 制作壁纸应用程序。我正在使用 palette_generator 包从图像中提取颜色。问题在于应用程序正在从图像中提取颜色。 UI 冻结了整整 3 秒，之后颜色显示在屏幕上。渲染颜色后，整个屏幕会出现卡顿和滞后现象。该屏幕上的所有动画效果都非常糟糕。弹出该屏幕可以消除卡顿和滞后。这是我正在使用的代码：

 Future<PaletteGenerator?> updatePalette() async {
 var cache = DefaultCacheManager();
 File file = await cache.getSingleFile(widget.wall.url);
    ui.Image image = await load(file);
    palette = await PaletteGenerator.fromImage(
      image,
      maximumColorCount: 7,
    );
 return palette;
  }

 Future<ui.Image> load(File file) async {
 var data = await file.readAsBytes();
    ui.Codec codec = await ui.instantiateImageCodec(data);
    ui.FrameInfo fi = await codec.getNextFrame();
 return fi.image;
  }

FutureBuilder<PaletteGenerator?>(
                    future: updatePalette(),
                    builder: (context, snapshot) {
                      if (snapshot.hasData)
                        return MyBottomSheet(
                            wall: widget.wall, palette: snapshot.data);

                      return LinearProgressIndicator();
                    }),

我能做些什么来解决这个问题吗？

Answer 1

我推荐使用 flutter_isolate 包来实现 Isolates。您正在使用的函数是一个重函数。使用 Isolated 避免对主线程施加太大压力。

示例代码：

void updatePalette() async {
    var cache = DefaultCacheManager();
    File file = await cache.getSingleFile(url);
    var port = ReceivePort();
    var isolate = await FlutterIsolate.spawn(
      computePalette,
      [file.readAsBytesSync(), port.sendPort],
    );
    port.listen((msg) {
      List<int> data = msg;
      data.forEach((d) => colorList.add(Color(d));
      isolate.kill();
      port.close();
    });
  }

void computePalette(List<Object> args) async {
  var image = args[0] as Uint8List;
  var port = args[1] as SendPort;
  var img = Image.memory(image);
  var palette = await PaletteGenerator.fromImageProvider(
    img.image,
    maximumColorCount: 7,
  );
  List<int> colors = [];
  palette.colors.forEach((element) => colors.add(element.value));
  port.send(colors);
}

从图像加载调色板后极度滞后

Extreme Lag After Loading Palette from Image

flutter

flutter-dependencies

flutter-packages