Flutter UI隔离渲染插件 dart_ui_isolate 的使用

dart_ui_isolate 插件允许在独立的 isolate 中运行 dart:ui，从而实现 UI 渲染的隔离。本文将详细介绍该插件的使用方法，并提供一个完整的示例 demo。

特性与限制

FlutterEngineGroup 支持

• 与 flutter_isolate 不同，dart_ui_isolate 支持 FlutterEngineGroup。
• 使用 FlutterEngineGroup 可以显著减少 RAM 使用（约99%），并且在 iOS 和 Android 上支持即时启动 isolate。
• 注意：macOS 不支持 FlutterEngineGroup。

平台插件不支持

• dart_ui_isolate 不支持在 spawn 的 isolate 中调用平台插件。
• 如果需要同时使用 dart:ui 和平台插件，请使用 flutter_isolate。

DartUiIsolate API

使用示例

示例代码

以下是一个完整的示例 demo，展示如何使用 dart_ui_isolate 进行 UI 渲染：

import 'dart:async';
import 'dart:ui' as ui;

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

// macOS 需要的入口点
[@pragma](/user/pragma)('vm:entry-point')
void _flutterIsolateEntryPoint() => DartUiIsolate.macosIsolateInitialize();

// Isolate 入口函数
[@pragma](/user/pragma)('vm:entry-point')
void isolateEntryPoint(String arg) async {
  print('isolate: setup canvas');
  final recorder = ui.PictureRecorder();
  final canvas = ui.Canvas(recorder);
  final paint = ui.Paint();
  paint.style = ui.PaintingStyle.fill;

  // 绘制圆形
  print('isolate: drawing circle');
  final size = ui.Size(300, 300);
  final center = ui.Offset(size.width / 2, size.height / 2);
  final radius = size.width / 4;
  canvas.drawCircle(center, radius, paint);

  // 结束录制
  print('isolate: ending recording');
  recorder.endRecording();
}

void main() async {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Dart UI Isolate'),
            ),
            body: AppWidget()));
  }
}

class AppWidget extends StatelessWidget {
  static void downloaderCallback(String id, int status, int progress) {
    print("progress: $progress");
  }

  Future<void> _runTest() async {
    final isolate = await DartUiIsolate.spawn(isolateEntryPoint, "painter");
    Timer(Duration(seconds: 5), () {
      print("Pausing Isolate 1");
      isolate.pause();
    });
    Timer(Duration(seconds: 10), () {
      print("Resuming Isolate 1");
      isolate.resume();
    });
    Timer(Duration(seconds: 20), () {
      print("Killing Isolate 1");
      isolate.kill();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
        Padding(
          padding: const EdgeInsets.only(top: 30),
          child: ElevatedButton(
            child: Text('Test Dart UI Isolate'),
            onPressed: _runTest,
          ),
        ),
      ]),
    );
  }
}