Flutter使用responsive_framework时响应式UI的单元与Widget测试实现方法

首先确认你项目中配置的响应式断点数值，responsive_framework默认断点为：移动端<600、平板600~1200、桌面端>1200，如果你自定义过断点，测试时需要对应调整尺寸数值。

测试核心逻辑 #

• Flutter测试默认使用固定的虚拟屏幕尺寸，需要手动修改测试环境的屏幕分辨率匹配各端尺寸
• 测试时构建的响应式配置需要和项目实际配置完全一致，否则判断逻辑不生效
• 每次测试完成后清除自定义的尺寸配置，避免影响其他测试用例

完整测试代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:responsive_framework/responsive_framework.dart';
// 替换为你实际要测试的组件导入路径
import 'package:your_project/your_target_widget.dart';

void main() {
  // 按你项目的断点调整对应尺寸数值
  const mobileTestSize = Size(400, 800);
  const tabletTestSize = Size(800, 1200);
  const desktopTestSize = Size(1400, 900);

  // 封装通用测试方法，减少重复代码
  Future<void> checkVisibilityBySize(WidgetTester tester, Size testSize, bool shouldVisible) async {
    // 手动设置测试环境的屏幕尺寸
    tester.binding.window.physicalSizeTestValue = testSize;
    tester.binding.window.devicePixelRatioTestValue = 1.0;

    // 构建和项目一致的响应式环境
    await tester.pumpWidget(
      MaterialApp(
        builder: (context, child) => ResponsiveWrapper.builder(
          child,
          // 这里的断点配置要和你项目实际的配置完全一致
          breakpoints: [
            const ResponsiveBreakpoint.resize(480, name: MOBILE),
            const ResponsiveBreakpoint.autoScale(800, name: TABLET),
            const ResponsiveBreakpoint.autoScale(1200, name: DESKTOP),
          ],
        ),
        home: Scaffold(body: YourTargetWidget()),
      ),
    );

    await tester.pumpAndSettle();
    // 校验可见性
    expect(find.byType(YourTargetWidget), shouldVisible ? findsOneWidget : findsNothing);
  }

  testWidgets('移动端尺寸下组件隐藏', (tester) async {
    await checkVisibilityBySize(tester, mobileTestSize, false);
  });

  testWidgets('平板尺寸下组件隐藏', (tester) async {
    await checkVisibilityBySize(tester, tabletTestSize, false);
  });

  testWidgets('桌面端尺寸下组件可见', (tester) async {
    await checkVisibilityBySize(tester, desktopTestSize, true);
  });

  // 所有测试完成后清除自定义尺寸配置
  tearDownAll(() {
    final binding = TestWidgetsFlutterBinding.ensureInitialized();
    binding.window.clearPhysicalSizeTestValue();
    binding.window.clearDevicePixelRatioTestValue();
  });
}

注意事项 #

• 如果你是用ResponsiveVisibility组件控制显隐，上述逻辑完全通用，只要替换查找的组件标识即可
• 如果你的组件显隐逻辑和横屏/竖屏相关，修改测试尺寸的宽高数值即可模拟横竖屏场景
• 不要省略pumpAndSettle调用，需要等待响应式框架完成布局判断后再校验结果，避免出现误判

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