【Flutter】画面を下にスワイプして最新の状態に更新する実装方法

はじめに

Twitterを触っていたときに下にスワイプして離すと最新の投稿データを取得できるやつってどうやって実装してるんだろうと思い気になったので自分がいつか仕事で実装する事があるかもしれないので調べてみました。

結論

RefreshIndicatorを使うことで実装可能です。

2021/10/21時点の情報のため、Flutterのバージョンにより実装方法が大きく変更されることがございます。

執筆時の環境

• Flutter2.5.2

実装方法

1. 今回作るもの

実装方法

今回Firestoreから値を取得しています。
DBについては適宜読み替えてください。

dart

class Sample extends StatefulWidget {
 const Sample({Key key}) : super(key: key);

 @override
 _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
 List titleList = [];

 Future<void> getTitle() async {
   final snapshot =
       await FirebaseFirestore.instance.collection('sample').get();
   setState(() {
     titleList = snapshot.docs.map((title) => title.data()['title']).toList();
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('sample'),
     ),
     body: RefreshIndicator(
       onRefresh: () async {
         // スワイプ時に更新したい処理を書く
         await getTitle();
       },
       child: ListView(
         children: titleList
             .map((title) => ListTile(
                   title: Text(title),
                 ))
             .toList(),
       ),
     ),
   );
 }
}

スクロール可能なWidgetに対してRefreshIndicatorをラップしてあげると、画像のような動きを実装可能です！
ローディング時にインジケーターが回転するようになります。
このインジケーターはonRefresh内に書いた処理が完了するまで画面上に現れ、完了したら画面外へ移動します。
またインジケーターのデザインはカスタマイズ可能です。

参考にしたサイト

まとめ

画面をリアルタイムで更新するのではなく、その都度更新したいときには相性の良いWidgetです。
インジケーターのカスタマイズできるし使い勝手が良さそうだなと感じました。
ここまでお付き合いありがとうございます！