How to find off-screen ListView child in widget tests?

Issue

When displaying multiple children in a ListView, if a child is off-screen it can’t be found by a widget test. Here’s a full example:

main.dart

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: Test()));
  }
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Container(
          height: 600,
          color: Colors.red,
        ),
        Text("Find me!"),
      ],
    );
  }
}

main_test.dart

import 'package:flutter_app/main.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets("Find text", (WidgetTester tester) async {
    final testableWidget = App();

    await tester.pumpWidget(testableWidget);

    expect(find.text("Find me!"), findsOneWidget);
  });
}

This test fails, however if I change the height of the Container in main.dart to 599 it works.

Anyone know why this happens? Is it a bug? Is there a way around it?

Solution

Tests should behave as your app would do, otherwise, your tests become useless (since you’re not testing the real behavior).
As such, this is not a bug.

You have to manually scroll the ListView inside your tests to make it load more widgets.

This can be done using tester:

final gesture = await tester.startGesture(Offset.zero /* THe position of your listview */ );
// Manual scroll
await gesture.moveBy(const Offset(0, 100));

await tester.pump(); // flush the widget tree 

Answered By – Rémi Rousselet

Answer Checked By – Senaida (FlutterFixes Volunteer)