Flutter データのローディング表示に使えるパッケージ

今回はFlutterでデータのローディング表示につかえるパッケージを紹介します。

リストなどのデータを取得、表示する際に非同期でデータをとってくるのでデータの表示までラグがあるというパターンはよくあるかと思います。
そんなときに下記のようにデータの表示領域にグレーのアニメーションをつけ、データの読み込み中というのを表現したいときがあるかと思います。

↑このような表示を簡単に実装できるパッケージがあります。
redactedというパッケージです。
https://pub.dev/packages/redacted

詳しい実装方法はパッケージのReadmeを参照してください。

簡単に説明すると、

MyWidget().redacted(
  context: context,
  redact: true,
  configuration: RedactedConfiguration(
    animationDuration : const Duration(milliseconds: 500), //default
  ),
)

↑のようにローディング表示させたいWidget(ここではMyWidget)にredactedメソッドを使うことで、Widgetをグレー背景の読み込み中表示に変えて表示してくれます。

サポートされているWidgetに制限はあるものの、メインどころはカバーされており、簡単に組み込むことができるので、おすすめです。

ぜひローディング表示で悩んでいる方は一度使ってみてください。