動画
要約
- リストの行がアニメーション無しに増えたり減ったりすると、ユーザーから見て何が起きたのかわかりにくい
- AnimatedListを使えば、行の追加削除がアニメーションで表現されるためわかりやすい
内容
動的に変化するリストは多くのアプリ開発で必要になります。
リストのアイテムは常に追加、削除、変更される可能性がありますが、その際、アニメーション無しでリストの内容が変化するとユーザーに混乱を与えてしまう可能性があります。
何が起きたのか理解しづらい
そんなときは、AnimatedListを使いましょう。
AnimatedListを使えば、簡単にリストをアニメートできます。
使い方は、まず、ItemBuilderを指定します。
ItemBuilderはリストの1行毎に実行される関数です。あなたはこの関数の中でitemをひとつひとつ作ることができます。
また、itemを追加する際のアニメーションも定義する必要があります。
あなたはanimationパラメータを使って自由にアニメーションを実装することができます。
また、リストが空でない限りは、initialItemCountも指定しましょう。
リストの初期化に関しては以上です。
次に、行の追加や削除について説明します。
行の追加や削除にはAnimatedListStateのinsertItemとremoveItemを使います。
AnimatedListStateの取得はどうすればいいでしょうか？
2つの方法があります。
リストを構築している関数内であれば、AnimatedList.of(context)で取得することができます。
それ以外の場所で使いたい場合はGlobalKeyを使って取得しましょう。
まず、GlobalKeyを生成して、そのKeyを使ってリストを初期化します。
その後は生成したGlobalKeyを使うことで、どこからでもAnimatedListStateを取得することができます。
次に、insertItemとremoveItemの使い方について説明します。
insertItemは指定したindexへの行追加をAnimatedListに伝え、アニメーションを開始します。
新しい行の作成にはAnimatedListに定義したItemBuilderが利用されます。
そのため、insertItemを呼び出す前にもとのリストを更新しておくことを忘れないでください。
（itemBuilderの中で_myItemsが利用されている）
removeItemも同様です。
削除する行のindexを指定して、itemの削除をAnimatedListに伝えます。
この際、insertItemと同様に、もとのリストのデータを削除しておくことを忘れないようにしてください。
また、削除時のアニメーションを決めるために、2つ目のパラメーターとしてbuilderを指定する必要があります。
（この例ではアニメーションを使っていない）
builderにはanimationが渡されているので、このanimationを使って削除時のアニメーションを自由に実装することができます。
まとめ
Widget of the Weekの#32 AnimatedListの日本語翻訳版でした。
動的に変化するリストは多くのアプリで必要になります。
AnimatedListを使うことでユーザーフレンドリーなリストを簡単に作ることができます。
■ 次の記事はこちら
#33 – Flexible
■Widget of the Week まとめ
Widget of the Week 一覧