【Flutter】【Dart】ListViewで表示するWidgetを下に引っ張ってデータを更新する

今回はListViewとRefreshIndicatorを使用を使用してListView内にあるデータを更新する機能を追加しましょう。

変数の初期値を定義する

List<String> itemList = ['item 1', 'item 2', 'item 3'];

LoadData関数を追加

データを取得してListに挿入します。実際にはHTTPリクエストなどを使用してデータを取得して挿入します。

Future _loadData() async {
   //Future.delay()を使用して擬似的に非同期処理を表現
   await Future.delayed(Duration(seconds: 2));

   print('Loaded New Data');

   setState(() {
      //新しいデータを挿入して表示
     itemList.add('New Item');
     print('itemList: ' + itemList.toString());
   });
 }

RefreshIndicatorを追加

RefreshIndicatorのchildプロパティにListViewが入る形になります。

body: Column(
   children: [
     Expanded(
       child: RefreshIndicator(
       ),
     ),
   ],
 ),

ListView.builderを追加

注意していただきたいのがListView.builderのphysicsプロパティにAlwaysScrollableScrollPhysics()を追加してください。これでないと下にスワイプしてもRefreshアイコンがうまく動作しません。

body: Column(
   children: [
     Expanded(
       child: RefreshIndicator(
         onRefresh: () async {
           print('Loading New Data');
           await _loadData();
         },
         child: ListView.builder(
           physics: AlwaysScrollableScrollPhysics(),
           itemCount: itemList.length,
           itemBuilder: (BuildContext context, int i) {
             return ListTile(
               title: Text(itemList[i]),
             );
           },
         ),
       ),
     ),
   ],
 ),

完成イメージ

以下のように下にスワイプすると新しいデータが挿入されました。

全体コード

import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Hatch Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: HomePage(),
   );
 }
}

class HomePage extends StatefulWidget {
 @override
 _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
 List<String> itemList = ['item 1', 'item 2', 'item 3'];

 Future _loadData() async {
   await Future.delayed(Duration(seconds: 2));

   print('Loaded New Data');

   setState(() {
     itemList.add('New Item');
     print('itemList: ' + itemList.toString());
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Load Data Demo'),
     ),
     body: Column(
       children: [
         Expanded(
           child: RefreshIndicator(
             onRefresh: () async {
               print('Loading New Data');
               await _loadData();
             },
             child: ListView.builder(
               physics: AlwaysScrollableScrollPhysics(),
               itemCount: itemList.length,
               itemBuilder: (BuildContext context, int i) {
                 return ListTile(
                   title: Text(itemList[i]),
                 );
               },
             ),
           ),
         ),
       ],
     ),
   );
 }
}

まとめ

今回はRefreshIndicatorとListViewを組み合わせて、下にスワイプするとデータを更新する機能を実装しました。もしこちらの記事が役に立ちましたらいいねお願いします。