FlutterのRefreshIndicatorウィジェットを使ってみた！

RefreshIndicatorとは？

RefreshIndicatorは、更新中であることを表示するウィジェットです。

使い方

使い方はListViewなどのスクロール可能なウィジェットをRefreshIndicatorでラップして使います。

RefreshIndicator(
    child: ListView(),
)

リストがオーバースクロールされると、更新をトリガーします。

実際に処理が実行されるように、onRefreshプロパティを使ってコールバック関数を追加します。
この関数はパラメータが必要ではありませんが、RefreshIndicatorにFutureが返ります。更新のインジケーターはFutureが保留状態の間、回転を続けます。

RefreshIndicator(
    onRefresh: _refresh,
    child: ListView(),
)
Future<void> _refresh() {
    return Future.delayed(
        Duration(seconds: 0),
    );
}

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(
      items: List<String>.generate(10000, (i) => 'Item $i'),
    ),
  );
}

class MyApp extends StatelessWidget {
  final List<String> items;

  const MyApp({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'Long List';

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

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: RefreshIndicator(
          onRefresh: _refresh,
          child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(items[index]),
              );
            },
          ),
        ),
      ),
    );
  }
}

デザインをカスタマイズすることもでき、背景色やスピナーの色、幅などを変更できます。

背景

RefreshIndicator(
    backgroundColor: Colors.red,
    onRefresh: _refresh,
    child: ListView(),
)

スピナーの色

RefreshIndicator(
    color: Colors.yellow,
    onRefresh: _refresh,
    child: ListView(),
)

スピナーの幅

RefreshIndicator(
    strokeWidth: 10,
    onRefresh: _refresh,
    child: ListView(),
)

まとめ

・RefreshIndicatorは、更新中であることを表示すことができる。
・背景やスピナーの色、幅などカスタマイズすることができる。