💁‍♂️

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

2021/10/29に公開

Flutter

tech

はじめに

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

結論

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

執筆時の環境

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です。
インジケーターのカスタマイズできるし使い勝手が良さそうだなと感じました。
ここまでお付き合いありがとうございます！

はじめに

結論

執筆時の環境

実装方法

1. 今回作るもの

実装方法

参考にしたサイト

まとめ

Discussion