Flutter ページ遷移するまでの時間スピナーを表示させたい

Question

ページ遷移するまで時間がかかる場合にスピナー(CircularProgressIndicator())
を表示させたいです。

https://flutter.dev/docs/cookbook/plugins/play-video

スピナー表示に関しては上記ページで動画再生準備完了までの間スピナーを表示するサンプルがあるのですが、FutureBuilderを使っており、futureに関してはVideoPlayerControllerクラスを使えば、その中で自動的に用意してくれるので、それをFutureBuilderの引数に設定すれば、それだけでできる、ということらしいです。

ということで、そういうのを用意してくれていれば、それを使えばいいと思うのですが。
つまり、今回の場合、ページ遷移した時にコンプリートするfutureを用いてFutureBuilderを作る必要があるのだと思うのですが。
このfutureは自分で実装するしかないのでしょうか?

「ページ遷移するまでスピナー表示させたい」という要求自体かなり一般的な気がするので、すでにそういうfutureを作る仕組みが用意されているのならそれを使いたいのですが、あるんでしょうか?

Comments

[tepci]

ページ遷移するまで時間がかかるのは具体的にどんな処理が原因でしょうか？
例えばサーバーとの通信や、ファイル読み書きなどがあります。ただ単に〇秒待ったあとにのFutureを返すメソッドも作ることもできます。

[moriman]

回答を頂きましてありがとうございます。

今回は、「一覧リスト表示画面」と「動画再生画面」がありまして、
「一覧リスト表示画面」内のボタンを押す(ファイルを選択)
↓
「一覧リスト表示画面」で選択されたファイルを作成(10秒程度)
↓
作成完了後「動画再生画面」へ遷移。その際作成したファイルを
引数として渡す。
↓
「動画再生画面」で再生準備完了までの間スピナー表示(1秒程度)
↓
動画再生

という流れで、ファイル作成で時間がかかっているのにその間はスピナーも何もなく「一覧リスト表示画面」が表示されているだけなので、ユーザーも「え?動いてるの?」という感じです笑

対応としては
(1)「一覧リスト表示画面」で、ページ遷移で完了するfutureを作ってスピナーを表示させる。
(2)「動画再生画面」でファイルを作成し、「ファイル作成→動画再生準備」が完了した時にコンプリートするfutureを作る→スピナーを表示。

上記の選択肢が頭に浮かぶのですが、(2)に関して、firebase_storageにあるファイルをクライアント側で作成(複製)するのは非同期処理になると思うのですが、
「動画再生画面」ウィジェットのbuild()メソッド内でawaitが使えない気がします。なので(2)の選択肢は不可能なんですかね?
であれば(1)になるのですが、ページ遷移完了でコンプリートするfutureの作り方がわかりません。

[tepci]

少し整理させてください。

対応策(1)
1.「一覧リスト表示画面」で動画一覧を表示。
2.動画を選択するとstorageから動画をダウンロード（ダウンロードされるまでスピナー表示）
3.ダウンロード完了後、「動画再生画面」へ遷移
4.再生準備完了されるまでスピナー表示

対応策(2)
1.「一覧リスト表示画面」で動画一覧を表示。
2.動画を選択すると「動画再生画面」へ遷移
3.遷移後、storageから動画をダウンロード（ダウンロード→再生準備完了までスピナー表示）

以上のような順序の認識で間違いないですか？

[moriman]

はい、そのように考えています。

ただやはり(2)の場合、「動画再生画面」ウィジェットのbuild()メソッド内でファイルを複製(ダウンロード)する処理はできないんですよね。(awaitが使えない。)

ただ、VideoPlayerの準備も非同期処理のはずで、それはできているので、結局ファイル複製(ダウンロード)もどうにかしたらできるはず、だとは思うのですけどね。

Answer 1

(1)も(2)も実現可能です。

(1)に関しては「ページ遷移で完了」ではなく、「ファイル作成で完了」という考え方にシフトしたほうがやりやすいと思います。ボタン押下時、ファイルダウンロード完了時にsetStateでスピナー表示/非表示を切り替えるなど。

イメージ↓
動画選択時の処理

bool _loading = false;

void _downloadVideo() async {
  // スピナー表示
  setState(() => _loading = true);
  _file = await xxxxxxxxxxxx().then((data) {
    // ダウンロード終了後
    // スピナー非表示
    setState(() => _loading = false);
    // 画面遷移
    Navigator.xxxxxxxxxxxxxxxxxxxxxxxxxx;
  });
}

...
  child: _loading
    ? CircularProgressIndicator() // _loadingがtrueならスピナー表示
    : VideoListView(),  // falseなら一覧表示
...

スピナーをオーバーレイ表示にしたい場合はこっちが向いている？

(2)は、FutureBuilderでssnapshot.hasDataがfalseの時はスピナー表示、trueになったらスピナーを消すという風にやればいいと思います。

イメージ↓

...
    child: FutureBuilder(
      future: _downloadVideo,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasData) {
          // ダウンロード完了したら動画再生画面を表示
          return VideoPlayerView();
        } else if (snapshot.hasError) {
          // エラー表示
          return Error();
        } else {
          // ダウンロード完了するまではスピナー表示
          return CircularProgressIndicator();
        }
      },
    ),
...

Future<File> _downloadVideo() async {
  // ファイルダウンロード
  _file = await xxxxxxxxxxxxxxxxxx();
  // ファイル準備
  return await xxxxxxxxxxxxxx(_file );
}

Comments

[moriman]

(1)の方法でスピナー出せました。
非常に便利なパッケージですね。
(2)も期を見てやってみようと思います。
本当にありがとうございました。