[Feature]: ページング機能のエラー発生時の復帰処理を実装する

[trm11tkr]

これに関する既存の Issue はありますか？

• 既存の Issue はありませんでした

動機

#2 にて基礎的なページング機能は実装しますが、2ページ目以降にエラーが発生した場合の復帰処理は未実装です。

提案

2ページ目以降にエラーが発生した場合の復帰処理を実装する。

参考: #2 では 以下の記事を参考に実装予定です。
https://zenn.dev/k9i/articles/b8c333e1bb8b9b

[Aosanori]

僭越ながら取り組ませていただきます！

[Aosanori]

@blendthink
YouTubeアプリ等を参考にし、オンラインに復帰したら自動的に読み込みを再開するような動作を実現するために、
ひとまず以下のようなconnectivity_plusパッケージを利用してオンラインかどうかを状態に持つようなProviderを作成してみました。

しかしながらconnectivity_plusパッケージはiOSシミュレータのみにおいて接続状況を正常に取得できない問題があります。
現在、issueはcloseされていますが最近でもいくらかまだ同じ問題が発生していることが報告されているようです。
私の環境では手元のMacのWifiを切り替えでは接続状況を取得できたり出来なかったりと動作が不安定でした。

fluttercommunity/plus_plugins#479

import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'connectivity_status_provider.g.dart';

@Riverpod(keepAlive: true)
class ConnectivityStatus extends _$ConnectivityStatus {
  @override
  Stream<bool> build() async* {
    connectivityStatus();
  }

  void connectivityStatus() {
    Connectivity().onConnectivityChanged.listen((connectivityResult) {
      state = AsyncData(_isOnline(connectivityResult));
    });
  }

  bool _isOnline(List<ConnectivityResult> connectivityResult) {
    const networkSource = [
      ConnectivityResult.mobile,
      ConnectivityResult.wifi,
      ConnectivityResult.ethernet,
    ];
    final result =
        connectivityResult.map(networkSource.contains).toList().contains(true);
    return result;
  }
}

動作例

2024-05-21.12.31.38.mov

[blendthink]

@Aosanori
実装方針のご検討ありがとうございます！

本来であればオフラインかどうかの判定も重要なのですが、いったんオフライン独自の実装は除外して検討していただけると助かります 🙏
というのも、次の理由からです。

• オフラインかどうか監視しないアプリがある
• オフライン時の UI/UX は異なる場合が多い（イメージ）

今回は、エラー発生時の復帰処理の実装ですので、オフラインかどうかはあまり気にせず、 API 実行時にエラーが発生したさいにどのように復帰させるかをご検討いただけると助かります！
現在のように SnackBar を表示する形だと、一部のレイアウトが隠れてしまったり、一定時間で消えてしまったりするので、例えば一番下に再実行ボタンを表示させるなどの対応が良さそうな気がしているのですが、想像できますでしょうか？

[Aosanori]

@blendthink
このようなイメージで間違いないでしょうか？

[blendthink]

@Aosanori
まさにそのようなイメージです！
ありがとうございます！

[Aosanori]

承知いたしました！
この方針で実装していきます！

[Aosanori]

@blendthink
以下のような動作にしてみましたがいかがでしょうか？
twitterのようにエラーが発生した場合、refreshボタンを表示させるようにしてみました。

2024-05-21.17.34.39.mov

[blendthink]

@Aosanori
動作については LGTM です！ありがとうございます！
アイコンや文言はエラーによって切り替えればいいかなと思いますが、いったん固定でも大丈夫です 🙆‍♂️

[Aosanori]

承知いたしました！お忙しい中ご確認ありがとうございます！
これについてPRを提出すればよろしいですか？

[blendthink]

はい、その認識であっています 🙆‍♂️

[Aosanori]

承知いたしました！お忙しい中ありがとうございます！