布団の中にいたい

Elasticsearchいじったり、Androidアプリ書いたり。最近は数学の勉強が楽しくなってきました。

flutterでpull to refreshを実装する

最近、友人たちと何か作るときにさっくりプロトタイプを作る手段としてflutterをちょこちょこ使っています。そんな中でpull to refreshどうやるんだろうと思ったので簡単にまとめます。

pull to refresh自体は既にRefreshIndicatorが用意されているので、それを使うといいと思います。

公式のドキュメントは以下。

docs.flutter.io

使い方は簡単で、RefreshIndicatorのonRefreshプロパティにrefresh時の挙動を実装するだけで動きます。

    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new RefreshIndicator(
            onRefresh: _onRefresh,
            child: new Scrollbar(
                child: new ListView(
                  children: _items.map((item) {
                    // 適当な処理
                  }).toList()
                )
              )
        )
    );

公式のサンプルでも用意されているので眺めてみるといいかもしれません。

github.com

まとめ

flutterでpull to refreshをできるようにしてみました。flutterはWidgetを色々組み合わせるだけである程度のものができ、公式のサンプルも豊富なのでちょっとしたものを作るのであれば非常に楽です。androidでpull to refreshを実装したときは微妙に面倒だった記憶があるんですが、今回はドキュメントを見つけてしまえば割と簡単にできました。

React Nativeだったり、Xamarinがあるなかで、どの程度流行るかはわかりませんが個人的にはある程度はやってほしいなーと思っていたりします。