Riverpod+AnimatedList+flutter_slidableを組み合わせる

こんにちは。趣味グラマのNobu(@nm_aru)です。

趣味で作っているflutterアプリで、Riverpod+StateNotifier+Freezedを使っているのですが、リスト画面にAnimatedListを使ったところ、いくつか問題が発生しました。

いつものようにググればすぐ解決かと思いきや、なかなか答えが見つからず、試行錯誤の末に、ようやく自分で解決出来たので、ブログに残しておこうと思います。

解決した方法をサンプルプロジェクトとして作りました。

AnimatedListを使うと2つの問題が発生

最初はListViewを使っていたのですが、リストの削除時にアニメーションが欲しくなり、AnimatedListに単純に切り替えると、2つの問題が発生しました。

AnimatedListに切り替えると、データベースには確実にデータがあるのに、1件も表示されなくなりました。

この原因は分かっていませんが、恐らく以下の理由なのかなと考えました。

リストのデータはRiverpod+StateNotifierを使って管理している
StateNotifierのconstructorでデータベースからデータを取得している(async)
AnimatedListにリストを渡した段階では、まだデータの取得が完了しておらず、データの取得が完了しても、AnimatedListがrebuildされていないのかもしれない

そこで、AnimatedListを使うWidgetの親Widgetで、StateNotifierのstateを使う処理を書いてみたところ、問題なく表示されるようになりました。

Slidableを使って削除ボタンを表示し削除を実行すると、アニメーションが動く事無く一瞬にして消えてしまいました。

これではAnimatedListを使っている意味が無いので、どうしたものかと悩んだあげく、AnimatedListからの削除と、StateNotifierからの削除を時間差で行う事で解決しました。

ユーザとしては見た目から消えていれば良い訳で、データベースから消えるのに数百ミリセカンドの遅れがあっても何の問題も無いだろうという判断です。

相変わらずGoogle先生に答えが無い時は厄介な事になりますが、そこを悩んで解決していくのもプログラミングの楽しさなので、今回も解決に至って本当に良かったです。

StackOverflowで同じような事を質問していた人がいましたが、誰も回答していなかったので、勇気を持って回答してみました。