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.

Solution

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>,
);

Comments

[TSR]

Using widget testing to catch Renderflex overflows is not working properly because we need to customize the screen size of the tester but the text size are not matching the real device text size. Please check this stackoverflow.com/questions/62447898/… and github.com/flutter/flutter/issues/59755