flutter - 在异步函数中运行 Palette Generator（由颤振团队提供）会使应用程序冻结一点

Question

我试图使用颤振团队的调色板生成器插件。但是，当我运行该函数时，UI 会冻结两三秒。这是我尝试使用它的方式：

void _generateColorPalette(BuildContext context) async {
    try {
      if (this.imageData == null) {
        return;
      }

      setState(() {
        isLoading = true;
      });

      final PaletteGenerator _temp = await PaletteGenerator.fromImageProvider(
          MemoryImage(imageData as Uint8List));

      setState(() {
        isLoading = false;
        pallete = _temp.colors.toList();
      });

      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('Pallete Generated!'),
          behavior: SnackBarBehavior.floating,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(50.0),
          ),
        ),
      );
    } catch (e) {
      setState(() {
        isLoading = false;
      });
      print('Error occured while generating the palette: $e');
    }
  }

我也尝试在计算函数中使用它，但无济于事，因为我收到此错误：

Restarted application in 2,281ms.
I/Timeline( 4948): Timeline: Activity_launch_request time:96984061
W/Activity( 4948): Slow Operation: Activity com.example.glitter/.MainActivity onActivityResult took 187ms
I/flutter ( 4948): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter ( 4948): The following _CastError was thrown while resolving an image:
I/flutter ( 4948): Null check operator used on a null value
I/flutter ( 4948):
I/flutter ( 4948): When the exception was thrown, this was the stack:
I/flutter ( 4948): #0      ImageProvider.resolveStreamForKey
I/flutter ( 4948): #1      ImageProvider.resolve.<anonymous closure>
I/flutter ( 4948): #2      ImageProvider._createErrorHandlerAndKey.<anonymous closure>.<anonymous closure>
I/flutter ( 4948): #3      SynchronousFuture.then
I/flutter ( 4948): #4      ImageProvider._createErrorHandlerAndKey.<anonymous closure>
I/flutter ( 4948): #8      ImageProvider._createErrorHandlerAndKey
I/flutter ( 4948): #9      ImageProvider.resolve
I/flutter ( 4948): #10     PaletteGenerator.fromImageProvider
I/flutter ( 4948): #11     _ImageScreenState.generatePallete
I/flutter ( 4948): #12     _IsolateConfiguration.apply
I/flutter ( 4948): #13     _spawn.<anonymous closure>
I/flutter ( 4948): #14     _spawn.<anonymous closure>
I/flutter ( 4948): #15     Timeline.timeSync (dart:developer/timeline.dart:163:22)
I/flutter ( 4948): #16     _spawn
I/flutter ( 4948): #17     _delayEntrypointInvocation.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:286:17)
I/flutter ( 4948): (elided 4 frames from class _RawReceivePortImpl and dart:async)
I/flutter ( 4948):
I/flutter ( 4948): Image provider: MemoryImage(Uint8List#e9679, scale: 1.0)
I/flutter ( 4948): Image configuration: ImageConfiguration(devicePixelRatio: 1.0)
I/flutter ( 4948): Image key: MemoryImage(Uint8List#e9679, scale: 1.0)
I/flutter ( 4948): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 4948): Error occured: TimeoutException: Timeout occurred trying to load from MemoryImage(Uint8List#e9679, scale: 1.0)
Reloaded 1 of 949 libraries in 1,408ms.
I/flutter ( 4948): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter ( 4948): The following _CastError was thrown while resolving an image:
I/flutter ( 4948): Null check operator used on a null value
I/flutter ( 4948):
I/flutter ( 4948): When the exception was thrown, this was the stack:
I/flutter ( 4948): #0      ImageProvider.resolveStreamForKey
I/flutter ( 4948): #1      ImageProvider.resolve.<anonymous closure>
I/flutter ( 4948): #2      ImageProvider._createErrorHandlerAndKey.<anonymous closure>.<anonymous closure>
I/flutter ( 4948): #3      SynchronousFuture.then
I/flutter ( 4948): #4      ImageProvider._createErrorHandlerAndKey.<anonymous closure>
I/flutter ( 4948): #8      ImageProvider._createErrorHandlerAndKey
I/flutter ( 4948): #9      ImageProvider.resolve
I/flutter ( 4948): #10     PaletteGenerator.fromImageProvider
I/flutter ( 4948): #11     _ImageScreenState.generatePallete
I/flutter ( 4948): #12     _IsolateConfiguration.apply
I/flutter ( 4948): #13     _spawn.<anonymous closure>
I/flutter ( 4948): #14     _spawn.<anonymous closure>
I/flutter ( 4948): #15     Timeline.timeSync (dart:developer/timeline.dart:163:22)
I/flutter ( 4948): #16     _spawn
I/flutter ( 4948): #17     _delayEntrypointInvocation.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:286:17)
I/flutter ( 4948): (elided 4 frames from class _RawReceivePortImpl and dart:async)
I/flutter ( 4948):
I/flutter ( 4948): Image provider: MemoryImage(Uint8List#53605, scale: 1.0)
I/flutter ( 4948): Image configuration: ImageConfiguration(devicePixelRatio: 1.0)
I/flutter ( 4948): Image key: MemoryImage(Uint8List#53605, scale: 1.0)
I/flutter ( 4948): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 4948): Error occured: TimeoutException: Timeout occurred trying to load from MemoryImage(Uint8List#53605, scale: 1.0)
Reloaded 2 of 949 libraries in 1,273ms.

以下是我尝试在隔离中使用它的方式：

  void _generateColorPalette(BuildContext context) async {
    try {
      if (this.imageData == null) {
        return;
      }

      setState(() {
        isLoading = true;
      });

      // final PaletteGenerator _temp = await PaletteGenerator.fromImageProvider(
      //     MemoryImage(imageData as Uint8List));

      final List<Color>? _temp =
          await compute(generatePalette, imageData as Uint8List);

      if (_temp == null) {
        return;
      }

      setState(() {
        isLoading = false;
        // pallete = _temp.colors.toList();
        pallete = _temp;
      });

      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('Pallete Generated!'),
          behavior: SnackBarBehavior.floating,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(50.0),
          ),
        ),
      );
    } catch (e) {
      setState(() {
        isLoading = false;
      });
      print('Error occured while generating the palette: $e');
    }
  }

和孤立的功能：

Future<List<Color>?> generatePalette(Uint8List _image) async {
  try {
    final PaletteGenerator _generator =
        await PaletteGenerator.fromImageProvider(MemoryImage(_image));

    return _generator.colors.toList();
  } catch (e) {
    print('Error occured while generating palette in the isolate: $e');
  }
}

关于可能缺少什么的任何想法？

标签： flutterdartdart-isolates