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

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

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

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

 

原因

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

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

ということのようです。

対処法

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

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

で解決できるようです。

 

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).

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

アバター

北川 博之(きーぼー)

みんなのプログラミング by Telulu LLC代表 大阪府生まれ。京都大学経済学部経済学科卒業。 2000年より、日本生命保険、ニッセイアセットマネジメント、パトナム・インベストメンツ(米国)で、日本株トレーダー・アナリスト、経営企画、システム開発等の業務に従事。主に日本株の売買執行・投資分析、経営計画の策定、海外投資家向け日本株営業、社内トレーディングシステム及び経理システムの開発等を行う。 2016年、合同会社てるる設立。スマホアプリプログラマーとして「新感覚脳トレアプリ・記憶戦隊オボエルンジャー」「Meisoー1番シンプルなマインドフルネス瞑想アプリ」をはじめとした、メンタルヘルス・知育系アプリを中心に4タイトル・計8本(Android・iOS)をリリース。 2017年、自身のこれまでの社会人経験・プログラミング経験・子育て経験を基に、プログラミングを通じて人々の人生を豊かにして、未来に希望の持てる明るい社会の実現に貢献したいとの想いから、プログラミング完全初心者と挫折経験のある人を支援する「プログラミング挫折撲滅プロジェクト・みんなのプログラミング by Telulu LLC」を設立し、プログラミングサポーター活動と心理カウンセリング活動を開始。これまでに3,000名を超える方のプログラミング挫折撲滅をサポート。

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

みんプロにかける想い

  1. プログラミングを通じて「やわらかい世の中」を作りたい(ぼくがプログラミング講座をやっている本当の理由②)

  2. プログラミングはみんなのもの!(プログラミングの醍醐味である「楽しさ」を伝えたい)

  3. トランプ政権2期目に起こるIT業界激震予想(前編:スマホの世界の構造問題に荒療治が行われる可能性)

  4. トランプ政権2期目に起こるIT業界激震予想(後編:ブロックチェーンによるインターネットの再民主化が行われる可能性)

  5. こんな無駄な苦労をするのはぼくで最後にしたい(ぼくがプログラミング講座をはじめたわけ)

みんプロ作成アプリ




みんプロ代表の黒歴史


TOP