Flutter. How to test that there is no overflows with integration tests?

Question

I use flutter_driver to do my integration tests in Flutter. On some screens text on buttons gives overflow errors. I want to create a test which can show that overflow happened. So when I will run all integration tests on a bunch of virtual/real devices I can see that UI is not positioned correctly.

Answer 1

There is no need for integration tests for that. Widget tests will do.

Since Widget testing runs with asserts enabled, calling tester.pumpWidget with a widget that would overflow will throw an exception and therefore make a failing test.

For example, the following test will fail:

testWidgets('overflow', (tester) async {
  await tester.pumpWidget(Row(
    textDirection: TextDirection.ltr,
    children: <Widget>[
      // too big to fit in the default size of the row
      Container(width: 99999),
    ],
  ));
});

Note that the screen size for widget testing can be customized. See How to test Flutter widgets on different screen sizes?

Alternatively, we can wrap our tested widget into a Container like so:

await tester.pumpWidget(Container(
  alignment: Alignment.center,
  width: <my screen widget>,
  height: <my screen height>,
  child: <the widget which I want to test overflow on>,
);