👉

Flutterのウィジェットテストでスワイプさせる方法

に公開
Flutter
tech

Flutterのウィジェットテストでスワイプしたときの動作を確認したいことがあり、その方法をまとめました。

テスト対象のコード、画面

Flutter公式のTabBarのサンプルコード、画面をテスト対象とします。3つのタブがあり、初期表示では真ん中のタブが表示されています。左右にスワイプすると画面が切り替わります。

It's cloudy here It's rainy here It's sunny here
コード
main.dart
import 'package:flutter/material.dart';

/// Flutter code sample for [TabBar].

void main() => runApp(const TabBarApp());

class TabBarApp extends StatelessWidget {
  const TabBarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const TabBarExample(),
    );
  }
}

class TabBarExample extends StatelessWidget {
  const TabBarExample({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Sample'),
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.cloud_outlined),
              ),
              Tab(
                icon: Icon(Icons.beach_access_sharp),
              ),
              Tab(
                icon: Icon(Icons.brightness_5_sharp),
              ),
            ],
          ),
        ),
        body: const TabBarView(
          children: <Widget>[
            Center(
              child: Text("It's cloudy here"),
            ),
            Center(
              child: Text("It's rainy here"),
            ),
            Center(
              child: Text("It's sunny here"),
            ),
          ],
        ),
      ),
    );
  }
}

https://api.flutter.dev/flutter/material/TabBar-class.html

スワイプしたときのテスト

ウィジェットテストでは、tester.dragを使うとスワイプをテストできます。

  • 第1引数にはスワイプしたいウィジェットを指定します。
  • 第2引数にはスワイプする距離Offsetを指定します。OffsetにはX軸方向（右は+、左は-）、Y軸方向（下は+, 上は-）の順で指定します。（スワイプの開始位置は第1引数のウィジェットの中央）
main_test.dart
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

Widget createScreen() {
  return const MaterialApp(
    home: TabBarExample(),
  );
}

void main() {
  testWidgets('タブのスワイプ', (WidgetTester tester) async {
    await tester.pumpWidget(createScreen());
    await tester.pumpAndSettle();

    // 右にスワイプする。Offset（X軸方向はマイナスなので左に500, Y軸方向は変化なし）
    await tester.drag(find.byType(TabBarView), const Offset(-500, 0));
    await tester.pumpAndSettle();

    expect(find.text("It's sunny here"), findsOneWidget);
  });
}

https://api.flutter.dev/flutter/flutter_test/WidgetController/drag.html

まとめ

Flutterのウィジェットテストでスワイプ操作を行う方法をまとめました。スワイプはtester.drag(ウィジェット, 移動方向)で実行できます。移動方向はOffset(X軸方向（右は+、左は-）、Y軸方向（下は+, 上は-）)で指定できます。

Discussion