【日本語版】【Flutter】Widget of the Week – #32 AnimatedList【要約】

動画

要約

  • リストの行がアニメーション無しに増えたり減ったりすると、ユーザーから見て何が起きたのかわかりにくい
  • AnimatedListを使えば、行の追加削除がアニメーションで表現されるためわかりやすい

内容

動的に変化するリストは多くのアプリ開発で必要になります。

リストのアイテムは常に追加、削除、変更される可能性がありますが、その際、アニメーション無しでリストの内容が変化するとユーザーに混乱を与えてしまう可能性があります。
 

いきなりリストの内容が変わると、
何が起きたのか理解しづらい

そんなときは、AnimatedListを使いましょう。
 

AnimatedListを使えば、簡単にリストをアニメートできます。
 

アニメーションで表現されるのでわかりやすい

使い方は、まず、ItemBuilderを指定します。

ItemBuilderはリストの1行毎に実行される関数です。あなたはこの関数の中でitemをひとつひとつ作ることができます。
 

リストの行毎にitemBuilderが呼ばれる

また、itemを追加する際のアニメーションも定義する必要があります。

あなたはanimationパラメータを使って自由にアニメーションを実装することができます。
 

Transitionと組み合わせて自由にアニメーションを実装できる

また、リストが空でない限りは、initialItemCountも指定しましょう。
 

リストの初期化に関しては以上です。

次に、行の追加や削除について説明します。

行の追加や削除にはAnimatedListStateのinsertItemとremoveItemを使います。
 

AnimatedListStateの取得はどうすればいいでしょうか?

2つの方法があります。

リストを構築している関数内であれば、AnimatedList.of(context)で取得することができます。
 

それ以外の場所で使いたい場合はGlobalKeyを使って取得しましょう。

まず、GlobalKeyを生成して、そのKeyを使ってリストを初期化します。
 

その後は生成したGlobalKeyを使うことで、どこからでもAnimatedListStateを取得することができます。
 

_myListKey.currentStateでAnimatedListStateを取得できる

次に、insertItemとremoveItemの使い方について説明します。

insertItemは指定したindexへの行追加をAnimatedListに伝え、アニメーションを開始します。

新しい行の作成にはAnimatedListに定義したItemBuilderが利用されます。

そのため、insertItemを呼び出す前にもとのリストを更新しておくことを忘れないでください。
 

insertItemを実行すると、itemBuilderで定義した処理が実行される。
そのため、insertItemの前にリスト(_myItems)にデータを追加しておく必要がある。
(itemBuilderの中で_myItemsが利用されている)

removeItemも同様です。

削除する行のindexを指定して、itemの削除をAnimatedListに伝えます。

この際、insertItemと同様に、もとのリストのデータを削除しておくことを忘れないようにしてください。
 

removeItemの前にもとのリスト(_myItems)からデータを削除しておく

また、削除時のアニメーションを決めるために、2つ目のパラメーターとしてbuilderを指定する必要があります。
 

第2引数として、builderを指定
(この例ではアニメーションを使っていない)

builderにはanimationが渡されているので、このanimationを使って削除時のアニメーションを自由に実装することができます。
 

削除時のアニメーションも自由自在

まとめ

Widget of the Weekの#32 AnimatedListの日本語翻訳版でした。

動的に変化するリストは多くのアプリで必要になります。

AnimatedListを使うことでユーザーフレンドリーなリストを簡単に作ることができます。

■ 次の記事はこちら
#33 – Flexible

■Widget of the Week まとめ
Widget of the Week 一覧