Flutter Cookbook 링크

Handle scrolling

많은 앱에는 이메일 클라이언트에서 음악 앱 등에 이르기까지 콘텐츠 목록이 있다. 위젯 테스트를 사용하여 목록에 예상 콘텐츠가 포함되어 있는지 확인하려면 목록을 스크롤하여 특정 항목을 검색하는 방법이 필요하다.

통합 테스트를 통해 목록을 스크롤하려면 flutter_test 패키지에 포함된 WidgetTester 클래스에서 제공하는 메서드를 사용하라.

이 레시피에서는 특정 위젯이 표시되는지 확인하기 위해 항목 목록을 스크롤하는 방법을 배우고 다양한 접근 방식의 장단점에 대해 논의한다.

이 레시피는 다음 단계를 사용한다.
1. 항목 목록이 있는 앱 제작
2. 목록을 스크롤하는 테스트 작성
3. 테스트 실행

1. 항목 목록이 있는 앱 만들기

이 레시피는 긴 항목 목록을 표시하는 앱을 빌드한다. 이 레시피를 테스트에 집중하려면 Work with long lists에서 만든 앱을 사용하라. 긴 목록으로 작업하는 방법을 잘 모르는 경우 introduction 레시피를 참조하라.

통합 테스트 내에서 상호작용하려는 위젯에 키를 추가하라.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(
    items: List<String>.generate(10000, (i) => 'Item $i'),
  ));
}

class MyApp extends StatelessWidget {
  final List<String> items;

  const MyApp({super.key, required this.items});

  @override
  Widget build(BuildContext context) {
    const title = 'Long List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          // Add a key to the ListView. This makes it possible to
          // find the list and scroll through it in the tests.
          key: const Key('long_list'),
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(
                items[index],
                // Add a key to the Text widget for each item. This makes
                // it possible to look for a particular item in the list
                // and verify that the text is correct
                key: Key('item_${index}_text'),
              ),
            );
          },
        ),
      ),
    );
  }
}

2. 목록을 스크롤하는 테스트 작성

이제 테스트를 작성할 수 있다. 이 예에서는 항목 목록을 스크롤하고 목록에 특정 항목이 있는지 확인한다. 이 WidgetTester 클래스는 특정 위젯이 표시될 때까지 목록을 스크롤하는 scrollUntilVisible() 메서드를 제공한다. 장치에 따라 목록의 항목 높이가 변경될 수 있으므로 유용하다.

목록에 있는 모든 항목의 높이를 알고 있거나 특정 위젯이 모든 장치에서 렌더링된다고 가정하는 대신 scrollUntilVisible() 메서드는 찾고 있는 항목을 찾을 때까지 항목 목록을 반복적으로 스크롤한다.

다음 코드는 scrollUntilVisible() 메서드를 사용하여 목록에서 특정 항목을 찾는 방법을 보여준다. 이 코드는 test/widget_test.dart 라고 불리는 파일에 남아있다.

// This is a basic Flutter widget test.
//
// To perform an interaction with a widget in your test, use the WidgetTester
// utility that Flutter provides. For example, you can send tap and scroll
// gestures. You can also use WidgetTester to find child widgets in the widget
// tree, read text, and verify that the values of widget properties are correct.

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

import 'package:scrolling/main.dart';

void main() {
  testWidgets('Counter increments smoke test', (tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(MyApp(
      items: List<String>.generate(10000, (i) => 'Item $i'),
    ));

    final listFinder = find.byType(Scrollable);
    final itemFinder = find.byKey(const ValueKey('item_50_text'));

    // Scroll until the item to be found appears.
    await tester.scrollUntilVisible(
      itemFinder,
      500.0,
      scrollable: listFinder,
    );

    // Verify that the item contains the correct text.
    expect(itemFinder, findsOneWidget);
  });
}

3. 테스트 실행

프로젝트 루트에서 다음 명령으로 테스트를 실행한다.
flutter test test/widget_test.dart