Flutter Widget测试中剪贴板复制粘贴功能失效的解决方法

问题描述 #

在Flutter测试代码里，模拟TextField输入值并提交后，尝试把输入内容复制到剪贴板再读取打印，但剪贴板功能完全失效，运行时抛出Null check operator used on a null value错误。

原测试代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';

Future<void> main() async {
  group(
    'TextField testing',
    () {
      TextEditingController controller = TextEditingController();

      testWidgets(
        'Copy text field value to clipboard',
        (tester) async {
          await tester.pumpWidget(
            MaterialApp(
              home: Scaffold(
                body: Column(
                  children: [
                    GestureDetector(
                      child: TextField(
                        key: const Key('textField'),
                        enableInteractiveSelection: true,
                        controller: controller,
                        onSubmitted: (value) async {
                          print('onSubmitted $value'); // works
                          await Clipboard.setData(ClipboardData(text: value)); // not working
                          ClipboardData? data = await Clipboard.getData(Clipboard.kTextPlain); // not working
                          print('clipboard content = ${data!.text}'); // not working
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );

          Finder textFieldFinder = find.byKey(const Key('textField'));
          TextField textField = tester.widget(textFieldFinder);
          String textFieldValue = DateTime.now().toString();

          await tester.tap(textFieldFinder);
          await tester.enterText(textFieldFinder, textFieldValue);
          await tester.testTextInput.receiveAction(TextInputAction.done);
          await tester.pumpAndSettle(Duration(seconds: 1));
        },
      );
    },
  );
}

问题原因 #

1. 测试环境无真实剪贴板：Flutter测试框架运行在模拟环境中，未对接系统真实剪贴板，直接调用Clipboard类的方法不会产生实际效果，getData会返回null。
2. 空指针异常：原代码用data!.text强制解包null值，触发Null check operator used on a null value错误。

修复方案 #

方案1：模拟剪贴板通道（贴近真实场景） #

通过TestDefaultBinaryMessenger拦截剪贴板的平台通道调用，模拟数据存储和读取逻辑，完整测试剪贴板调用流程：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';

Future<void> main() async {
  group('TextField testing', () {
    TextEditingController controller = TextEditingController();
    String? _simulatedClipboard; // 模拟剪贴板存储

    testWidgets('Copy text field value to clipboard', (tester) async {
      // 拦截剪贴板相关的平台方法调用
      TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger.setMockMethodCallHandler(
        SystemChannels.platform,
        (MethodCall call) async {
          if (call.method == 'Clipboard.setData') {
            // 处理复制操作：存储数据到模拟变量
            final args = call.arguments as Map<String, dynamic>;
            _simulatedClipboard = args['text'];
            return null;
          } else if (call.method == 'Clipboard.getData') {
            // 处理粘贴操作：返回模拟变量中的数据
            return {'text': _simulatedClipboard};
          }
          return null;
        },
      );

      await tester.pumpWidget(
        MaterialApp(
          home: Scaffold(
            body: Column(
              children: [
                TextField(
                  key: const Key('textField'),
                  enableInteractiveSelection: true,
                  controller: controller,
                  onSubmitted: (value) async {
                    print('onSubmitted $value');
                    await Clipboard.setData(ClipboardData(text: value));
                    ClipboardData? data = await Clipboard.getData(Clipboard.kTextPlain);
                    print('clipboard content = ${data?.text}'); // 使用安全访问符避免空指针
                  },
                ),
              ],
            ),
          ),
        ),
      );

      Finder textFieldFinder = find.byKey(const Key('textField'));
      String textFieldValue = DateTime.now().toString();

      await tester.tap(textFieldFinder);
      await tester.enterText(textFieldFinder, textFieldValue);
      await tester.testTextInput.receiveAction(TextInputAction.done);
      await tester.pumpAndSettle();

      // 断言剪贴板内容与输入值一致
      expect(_simulatedClipboard, textFieldValue);
    });
  });
}

方案2：直接模拟剪贴板逻辑（简洁高效） #

如果无需测试剪贴板的平台调用流程，仅需验证输入值传递，可直接用变量模拟剪贴板，跳过Clipboard类调用：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';

Future<void> main() async {
  group('TextField testing', () {
    TextEditingController controller = TextEditingController();
    String? _testClipboard; // 模拟剪贴板

    testWidgets('Copy text field value to clipboard', (tester) async {
      await tester.pumpWidget(
        MaterialApp(
          home: Scaffold(
            body: Column(
              children: [
                TextField(
                  key: const Key('textField'),
                  enableInteractiveSelection: true,
                  controller: controller,
                  onSubmitted: (value) async {
                    print('onSubmitted $value');
                    // 模拟复制操作
                    _testClipboard = value;
                    // 模拟读取操作
                    print('clipboard content = $_testClipboard');
                  },
                ),
              ],
            ),
          ),
        ),
      );

      Finder textFieldFinder = find.byKey(const Key('textField'));
      String textFieldValue = DateTime.now().toString();

      await tester.tap(textFieldFinder);
      await tester.enterText(textFieldFinder, textFieldValue);
      await tester.testTextInput.receiveAction(TextInputAction.done);
      await tester.pumpAndSettle();

      expect(_testClipboard, textFieldValue);
    });
  });
}

额外优化点 #

原代码中用GestureDetector包裹TextField属于冗余操作，TextField本身可响应点击和提交事件，建议移除该嵌套。

内容的提问来源于stack exchange，提问作者Jean-Pierre Schnyder