[Flutter]ListViewの最下部からスクロールアップしたらリストの先頭まで戻ってしまう場合の対処法(AutomaticKeepAliveClientMixinの使い方)

これは、ListViewFutureBuilderを組み合わせたFlutterアプリに起こるトラップ的な話なのです。

以下のgifのような感じで、リストの一番にしたに来た状態から少しだけスクロールアップさせようとすると、なんとリストの一番先頭(ないしはだいぶ上の方)まで戻ってしまうという現象が発生してしまいます。

blank

この発生原因と対処法のご案内です。

 

原因

原因は、このstackOverFlowの記事にもありますが、

  • ListView・ScrollViewは現在画面に見えていない要素(children)は一旦破棄(dispose)されて、最後画面に表示される段階になった際に、再度インスタンスが生成される(描画コスト抑制のため・AndroidのRecyclerViewと同じ発想)。
  • しかし、今回の場合は要素(children)をFutureBuilderで生成しているため、インスタンスが再生成されるまでにタイムラグが生じる。
  • そのため、スクロールアップして、画面に消えていた要素(children)を再描画するために、その要素のインスタンスを再生成する際に、FutureBuilderが起動時に、データ取得までの一瞬のタイムラグの間にProgressIndicatorが描画されることで、スクロール前のページの状態がクリアされてしまい、リスト全体がイチから再描画されてしまったため、リストの先頭に戻ってしまった。

ということのようです。

対処法

ですので、対処法としては、

  1. 「状態を保持したまま画面の切り替え(再描画)」をするために、「AutomaticKeepAliveClientMixin」を使う
  2. AutomaticKeepAliveClientMixinはStateクラスを継承したクラスと一緒に使う仕様になっているために、StatefulWidgetに
  3. wantKeepAlive(現在の状態を保持するかどうかを格納するgetterプロパティ)は、AutomaticKeepAliveClientMixinが実装しないといけないものなので必要(これをtrueにすることで状態を保持できる)

で解決できるようです。

blank

 

A mixin with convenience methods for clients of AutomaticKeepAliveUsed with State subclasses.

Subclasses must implement wantKeepAlive, and their build methods must call super.build (the return value will always return null, and should be ignored).

(詳しくは、下の動画で解説していますので、よろしければ御覧ください)

blank

こんな記事も読まれています

今すぐプレゼントを受け取る(約6時間のFlutter初級編体験版動画講座を無料でプレゼント)
blank

はじめての方へ

blank
みんプロ式プログラミング講座体系・ラインナップ
みんプロ式プログラミング講座受講の流れ(割引特典利用方法)
サイトマップ(みんプロHPコンテンツ一覧)
運営会社概要

おすすめコンテンツ

プログラミングを学ぶとどんないいことがあるのか
みんプロ式を選んでいただける6つの理由
ぼくの人生挫折ヒストリー(代表者プロフィール)
ぼくのプログラミング挫折ヒストリー(無料メール講座・6大特典付き)
今最も注目のアプリ開発ツール「Flutter(フラッター)」ミニ動画講座

みんプロ作成アプリ

blank
blank
blank
blank
blank

みんプロ式動画講座(コア・Flutter)

ゼロからのFlutter(初級編)-はじめてのプログラミングからアプリリリースまで-
Flutter中級編1-Web通信・設計・状態管理・DIの基礎-
Flutter中級編2-Firebase/地図・カメラ連携等の基礎-
Flutter中級編3-広告/アプリ内課金等の基礎-
Flutter中級編4-Webアプリとレスポンシブデザインの基礎-

みんプロ式動画講座(サテライト)

Flutter/Dartトラブルシューティング・小ネタ集(コア初級編受講で無料プレゼント)
ゼロからのGit・GitHub(コマンドラインツールを極力使わないバージョン管理入門)
Flutter/Dartにおける設計・状態管理・DIの解説集
Dart逆引き大辞典
Flutterにおけるテストの基礎
blank
blank

TOP