【Flutter】ListViewに簡単なAnimationを使う

3027 ワード
ListView Dart animation Flutter Dart テキストリンク

背景

こちらの記事(Two Months of #FlutterGoodNewsWednesday)にて、2020年5月のアップデート情報が紹介されていました。

記事自体結構アップデート情報がまとまっているのでおすすめです。

そこで、Plugins and Flutter FavoritesとしておすすめのPluginとして紹介されていたflutter_staggered_animations 0.1.2を現在リリースしているこちらのアプリに導入してみました。

App Store はこちら

導入イメージ

ソースコード

YourListChild()の部分に本来描画したいList要素を記載するだけです。

    AnimationLimiter(
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return AnimationConfiguration.staggeredList(
            position: index,
            duration: const Duration(milliseconds: 375),
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: YourListChild(),
              ),
            ),
          );
        },
      ),
    ),

対象のコミットはこちら