如何在不同的屏幕尺寸上测试Flutter小部件？

Question

我有一个Flutter小部件,根据屏幕大小显示额外的数据.有没有人知道在多种不同的屏幕尺寸上测试这个小部件的方法？

我已经浏览了widget_tester源代码,但找不到任何东西.

Answer 1

您可以使用TestWidgetsFlutterBinding指定自定义曲面大小

以下代码将运行屏幕大小为42x42的测试

import 'package:flutter/widgets.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  final TestWidgetsFlutterBinding binding =
      TestWidgetsFlutterBinding.ensureInitialized();

  testWidgets("foo", (tester) async {
    await binding.setSurfaceSize(Size(42, 42));
    // resets the screen to its orinal size after the test end
    addTearDown(() => binding.setSurfaceSize(null));

    // TODO: do something
  });
}

Answer 2

从版本 3.10.0 开始，窗口单例已弃用（https://docs.flutter.dev/release/writing-changes/window-singleton）。因此，现在必须将大小设置如下：

import 'package:flutter/widgets.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets("foo", (tester) async {
    tester.view.physicalSize = Size(42, 42);

    // resets the screen to its original size after the test end
    addTearDown(tester.view.resetPhysicalSize);

    // TODO: do something
  });
}

Answer 3

有一个名为device_preview的包可以模拟在不同设备上运行的 Flutter 应用程序。

Answer 4

不知道为什么，但是@rémi-rousselet的解决方案对我不起作用。我必须使用binding.window.physicalSizeTestValue和指定屏幕尺寸，binding.window.devicePixelRatioTestValue以便输出是完全确定的

我为像我这样颤抖的初学者添加了一些代码。检查一下：

void main() {

  final TestWidgetsFlutterBinding binding =
    TestWidgetsFlutterBinding.ensureInitialized();

  testWidgets("Basic layout test (mobile device)", (tester) async {
    binding.window.physicalSizeTestValue = Size(400, 200);
    binding.window.devicePixelRatioTestValue = 1.0;

    await tester.pumpWidget(new MyApp());

    expect(find.byType(MyHomePage), findsOneWidget);
    // etc.
  });
}

Answer 5

目前最安全的方法是使用setSurfaceSize

import 'package:flutter/widgets.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets("foo", (tester) async {
    tester.binding.setSurfaceSize(Size(400, 400));

    // reset
    tester.binding.setSurfaceSize(null);

    // continue
  });
}

请参阅此处相关的 Github 问题

Answer 6

@rémi-rousselet 的解决方案非常有效！

此外，如果您想测试方向更改，请尝试以下操作：

const double PORTRAIT_WIDTH = 400.0;
const double PORTRAIT_HEIGHT = 800.0;
const double LANDSCAPE_WIDTH = PORTRAIT_HEIGHT;
const double LANDSCAPE_HEIGHT = PORTRAIT_WIDTH;

final TestWidgetsFlutterBinding binding = TestWidgetsFlutterBinding.ensureInitialized();

await binding.setSurfaceSize(Size(PORTRAIT_WIDTH, PORTRAIT_HEIGHT));
await tester.pumpWidget(MyWidget());

// test in portrait

await binding.setSurfaceSize(Size(LANDSCAPE_WIDTH, LANDSCAPE_HEIGHT));
await tester.pumpAndSettle();

// OrientationBuilder gets triggered

// test in landscape