【Flutter】RefreshIndicatorを使ってスワイプを感知する

FlutterでRefreshIndicatorを使ってスワイプを感知したい！

概要

今回の記事では、FlutterでRefreshIndicatorを使ってスワイプを感知する手順を掲載する。

JavaのAndroid開発で言うところのSwipeRefreshLayout.OnRefreshListener。スクロール上限で更に下へスワイプすると画面が更新される的な感じのやつ。

仕様書

環境

Android Studio Giraffe | 2023.2.1 Patch 2
Flutter 3.19.6

手順書

SingleChildScrollViewの親にRefreshIndicatorを設定して、スワイプを感知する例。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: const RefreshIndicatorSample1()
      )
    )
  );
}

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

  Future<void> update() async {
    return Future.delayed(
      const Duration(seconds: 3),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: RefreshIndicator(
        onRefresh: update,
        child: SingleChildScrollView(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: [
                Container(
                  color: Colors.amber,
                  height: 500,
                  child: const Center(
                    child: Text('Amber'),
                  ),
                ),
                Container(
                  color: Colors.red,
                  height: 500,
                  child: const Center(
                    child: Text('Red'),
                  ),
                ),
                Container(
                  color: Colors.green,
                  height: 500,
                  child: const Center(
                    child: Text('Green'),
                  ),
                ),
                Container(
                  color: Colors.blue,
                  height: 500,
                  child: const Center(
                    child: Text('Blue'),
                  ),
                ),
                Container(
                  color: Colors.purple,
                  height: 500,
                  child: const Center(
                    child: Text('Purple'),
                  ),
                ),
              ]),
        ),
      ),
    );
  }
}

スクロールバーの上限でスワイプを感知するとonRefreshで設定した関数updateが実行される。この関数の中でデータを更新したりする感じ。

まとめ（感想文）

GestureDetectorを使って同じようなことをしようとしてたのは良い思い出…。