Flutter：大尺寸Widget截图性能优化问题咨询

针对2000x2500逻辑像素（pixelRatio=1.0）的截图性能问题，以下是优先保留应用内处理能力的优化方案，分为Flutter端优化和原生端实现两类：

Flutter端优化方案 #

1. 后台线程处理PNG编码 #

toByteData(format: ui.ImageByteFormat.png)是耗时的编码操作，默认在UI线程执行会导致卡顿。可以借助compute函数将编码逻辑移至后台Isolate，避免阻塞UI：

首先添加image库依赖到pubspec.yaml：

dependencies:
  image: ^4.0.17

然后修改截图代码：

import 'dart:ui' as ui;
import 'package:flutter/foundation.dart';
import 'package:image/image.dart' as img;

Future<Uint8List> takeScreenShot() async {
  // 获取RenderRepaintBoundary
  final boundary = previewContainer.currentContext.findRenderObject() as RenderRepaintBoundary;
  // 生成Image对象
  final uiImage = await boundary.toImage(pixelRatio: 1.0);
  // 先转为RawRGBA格式（比直接转PNG更快）
  final byteData = await uiImage.toByteData(format: ui.ImageByteFormat.rawRgba);
  final rawBytes = byteData!.buffer.asUint8List();

  // 将PNG编码操作移至后台Isolate
  final pngBytes = await compute(_encodeRawToPng, {
    'width': uiImage.width,
    'height': uiImage.height,
    'rawBytes': rawBytes,
  });

  // 及时释放Image资源，减少内存占用
  await uiImage.dispose();
  return pngBytes;
}

// 必须是顶层/静态函数，适配Isolate序列化要求
static Uint8List _encodeRawToPng(Map<String, dynamic> params) {
  final width = params['width'] as int;
  final height = params['height'] as int;
  final rawBytes = params['rawBytes'] as Uint8List;

  final image = img.Image.fromBytes(width, height, rawBytes, format: img.Format.rgba);
  return img.encodePng(image);
}

2. 分块截图拼接 #

将大尺寸Widget拆分为多个小区域分别截图，再拼接为完整图片，降低单张截图的内存占用：

import 'dart:ui' as ui;
import 'package:flutter/foundation.dart';
import 'package:image/image.dart' as img;

// 假设previewContainer是StatefulWidget，内部通过ClipRect控制显示区域
Rect _clipRect = Rect.zero;

Future<Uint8List> takeChunkedScreenshot() async {
  final renderBox = previewContainer.currentContext.findRenderObject() as RenderBox;
  final totalWidth = renderBox.size.width.toInt();
  final totalHeight = renderBox.size.height.toInt();

  // 定义分块大小（可根据旧手机内存调整）
  const chunkWidth = 1000;
  const chunkHeight = 1250;

  final List<img.Image> chunks = [];

  for (int y = 0; y < totalHeight; y += chunkHeight) {
    for (int x = 0; x < totalWidth; x += chunkWidth) {
      final currentWidth = chunkWidth.clamp(0, totalWidth - x);
      final currentHeight = chunkHeight.clamp(0, totalHeight - y);

      // 更新ClipRect，只显示当前分块区域
      setState(() {
        _clipRect = Rect.fromLTWH(x.toDouble(), y.toDouble(), currentWidth.toDouble(), currentHeight.toDouble());
      });
      // 等待Widget重绘完成
      await Future.delayed(const Duration(milliseconds: 30));

      // 截取当前分块
      final boundary = previewContainer.currentContext.findRenderObject() as RenderRepaintBoundary;
      final uiImage = await boundary.toImage(pixelRatio: 1.0);
      final byteData = await uiImage.toByteData(format: ui.ImageByteFormat.rawRgba);
      final rawBytes = byteData!.buffer.asUint8List();

      chunks.add(img.Image.fromBytes(currentWidth, currentHeight, rawBytes, format: img.Format.rgba));
      await uiImage.dispose();
    }
  }

  // 拼接所有分块为完整图片
  final finalImage = img.Image(totalWidth, totalHeight);
  int yOffset = 0;
  final chunkPerRow = (totalWidth / chunkWidth).ceil();
  for (int i = 0; i < chunks.length; i += chunkPerRow) {
    int xOffset = 0;
    for (int j = i; j < i + chunkPerRow; j++) {
      if (j >= chunks.length) break;
      img.copyInto(finalImage, chunks[j], dstX: xOffset, dstY: yOffset);
      xOffset += chunks[j].width;
    }
    yOffset += chunks[0].height;
  }

  return img.encodePng(finalImage);
}

使用时需在Widget外层包裹ClipRect：

ClipRect(
  clipper: _ChunkClipper(_clipRect),
  child: YourLargeWidget(),
)

// 自定义Clipper
class _ChunkClipper extends CustomClipper<Rect> {
  final Rect clipRect;
  _ChunkClipper(this.clipRect);

  @override
  Rect getClip(Size size) => clipRect;
  @override
  bool shouldReclip(_ChunkClipper oldClipper) => oldClipper.clipRect != clipRect;
}

3. 及时释放资源 #

每次截图完成后，务必调用uiImage.dispose()释放Image对象占用的内存，避免旧手机内存溢出。

原生端实现方案 #

通过MethodChannel调用Android/iOS原生截图API，原生系统的截图逻辑通常比Flutter端更高效，尤其适合大尺寸场景。

通用Flutter端调用代码 #

import 'package:flutter/services.dart';

static const MethodChannel _screenshotChannel = MethodChannel('com.your.app/screenshot');

Future<Uint8List> takeNativeScreenshot() async {
  final renderBox = previewContainer.currentContext.findRenderObject() as RenderBox;
  final offset = renderBox.localToGlobal(Offset.zero);
  final size = renderBox.size;

  try {
    return await _screenshotChannel.invokeMethod('takeScreenshot', {
      'x': offset.dx.toInt(),
      'y': offset.dy.toInt(),
      'width': size.width.toInt(),
      'height': size.height.toInt(),
    });
  } on PlatformException catch (e) {
    print('Native screenshot failed: ${e.message}');
    return Uint8List(0);
  }
}

Android端实现 #

使用PixelCopy API（比DrawingCache更稳定，支持大尺寸截图）：

class MainActivity : FlutterActivity() {
    private val CHANNEL = "com.your.app/screenshot"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            if (call.method == "takeScreenshot") {
                val x = call.argument<Int>("x") ?: 0
                val y = call.argument<Int>("y") ?: 0
                val width = call.argument<Int>("width") ?: 0
                val height = call.argument<Int>("height") ?: 0

                takeScreenshot(x, y, width, height, result)
            } else {
                result.notImplemented()
            }
        }
    }

    private fun takeScreenshot(x: Int, y: Int, width: Int, height: Int, result: MethodChannel.Result) {
        val flutterView = flutterEngine?.view?.view ?: run {
            result.error("VIEW_NULL", "Flutter view not found", null)
            return
        }

        val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
        val viewLocation = IntArray(2)
        flutterView.getLocationOnScreen(viewLocation)

        val sourceRect = Rect(
            x + viewLocation[0],
            y + viewLocation[1],
            x + viewLocation[0] + width,
            y + viewLocation[1] + height
        )

        val pixelCopyRequest = PixelCopy.Request.Builder(window)
            .setSourceRect(sourceRect)
            .setDestination(bitmap)
            .build()

        val listener = PixelCopy.OnPixelCopyFinishedListener { copyResult ->
            if (copyResult == PixelCopy.SUCCESS) {
                val outputStream = ByteArrayOutputStream()
                bitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream)
                val pngBytes = outputStream.toByteArray()
                bitmap.recycle()
                result.success(pngBytes)
            } else {
                bitmap.recycle()
                result.error("COPY_FAILED", "Pixel copy failed with code: $copyResult", null)
            }
        }

        PixelCopy.request(window, pixelCopyRequest, listener, Handler(Looper.getMainLooper()))
    }
}

iOS端实现 #

import Flutter
import UIKit

class ScreenshotPlugin: NSObject, FlutterPlugin {
    static func register(with registrar: FlutterPluginRegistrar) {
        let channel = FlutterMethodChannel(name: "com.your.app/screenshot", binaryMessenger: registrar.messenger())
        let instance = ScreenshotPlugin()
        registrar.addMethodCallDelegate(instance, channel: channel)
    }

    func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        guard call.method == "takeScreenshot" else {
            result(FlutterMethodNotImplemented)
            return
        }

        guard let args = call.arguments as? [String: Int],
              let x = args["x"], let y = args["y"],
              let width = args["width"], let height = args["height"] else {
            result(FlutterError(code: "INVALID_ARGS", message: "Invalid parameters", details: nil))
            return
        }

        guard let flutterView = UIApplication.shared.windows.first?.rootViewController?.view as? FlutterView else {
            result(FlutterError(code: "VIEW_NULL", message: "Flutter view not found", details: nil))
            return
        }

        // scale=1.0对应pixelRatio=1.0，保持逻辑像素尺寸
        UIGraphicsBeginImageContextWithOptions(CGSize(width: width, height: height), false, 1.0)
        let captureRect = CGRect(x: CGFloat(x), y: CGFloat(y), width: CGFloat(width), height: CGFloat(height))
        flutterView.drawHierarchy(in: captureRect, afterScreenUpdates: true)
        
        guard let image = UIGraphicsGetImageFromCurrentImageContext() else {
            UIGraphicsEndImageContext()
            result(FlutterError(code: "CAPTURE_FAILED", message: "Failed to capture image", details: nil))
            return
        }
        UIGraphicsEndImageContext()

        guard let pngData = image.pngData() else {
            result(FlutterError(code: "ENCODE_FAILED", message: "Failed to encode PNG", details: nil))
            return
        }
        result(pngData)
    }
}

在AppDelegate.swift中注册插件：

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    ScreenshotPlugin.register(with: window?.rootViewController as! FlutterViewController)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}

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