【Flutter】TabViewのページ切り替え時に再ビルドが走らないようにする【TabView】

17936 ワード
Riverpod Flutter TabView Flutter テキストリンク

はじめに

最近Flutterでたくさん実装していて、TabViewを使う画面をこの間作った。

Androidみたいにキャッシュするページ数を設定できるAPIがあるかなと思ったんだけど、そんなこともなく、ページ切り替えの度に再ビルドが走って、なんだったらデータの取得も毎回行われていた。

ページ切り替え後に前のページが表示されていて、ちょっとしてから更新されているのがわかるね。
データがキャッシュされていないので、一度表示したページを再度表示した時も再ビルドが走っちゃっている感じがする。
実際のプロジェクトではImageなども使用しているので、もっとわかりやすく描画が遅れていた。

これではパフォーマンスもUXも良くないなと思い、ページ切り替えの際に画面のビルドが走らないようにしたよ。
今回はその時やったことをまとめた。

前提

今回はRiverpodを利用したMVVMアーキテクチャで実装しているよ。

やること

今回の実装に必要なことは大きく分けて下記の2つ。

  1. タブで表示するページのクラスにAutomaticKeepAliveClientMixinをwithする。
  2. ViewModelのProviderで.familyを使う。

1.タブで表示するページのクラスにAutomaticKeepAliveClientMixinをwithする。

StackOverFlowで調べたところ、同じことを聞いてる人がいて、このやり方が紹介されていた。
やることはめちゃくちゃ簡単で、

これを

class HomeTabPage extends HookConsumerWidget {
  final int index;

  const HomeTabPage({Key? key, required this.index}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.read(homeTabViewModelNotifierProvider);
    final list = ref
        .watch(homeTabViewModelNotifierProvider.select((value) => value.list));

    useEffect(() {
      viewModel.fetchData(index);
      return;
    }, []);

    return list != null
        ? ListView.separated(
            itemCount: list.length,
            itemBuilder: (context, index) {
              return Container(
                  alignment: Alignment.centerLeft,
                  height: 56,
                  padding: EdgeInsets.symmetric(horizontal: 8),
                  child: Text(
                      list[index],
                    style: const TextStyle(
                      fontSize: 18
                    ),
                  )
              );
            },
            separatorBuilder: (context, index) {
              return const Divider(height: 1, color: Colors.black);
            },
          )
        : const SizedBox();
  }
}

こうするだけ。

class HomeTabPage extends StatefulHookConsumerWidget {
  final int index;

  const HomeTabPage({Key? key, required this.index}) : super(key: key);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _HomeTabPageState();
}

class _HomeTabPageState extends ConsumerState<HomeTabPage>
    with AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    final viewModel = ref.read(homeTabViewModelNotifierProvider);
    final list = ref
        .watch(homeTabViewModelNotifierProvider.select((value) => value.list));

    useEffect(() {
      viewModel.fetchData(widget.index);
      return;
    }, []);

    return list != null
        ? ListView.separated(
      itemCount: list.length,
      itemBuilder: (context, index) {
        return Container(
            alignment: Alignment.centerLeft,
            height: 56,
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Text(
              list[index],
              style: const TextStyle(
                  fontSize: 18
              ),
            )
        );
      },
      separatorBuilder: (context, index) {
        return const Divider(height: 1, color: Colors.black);
      },
    )
        : const SizedBox();
  }
}

StatelessだったHomeTabPageをStatefulにして、with AutomaticKeepAliveClientMixinを追加してあげるだけ。
簡単✨

2. ViewModelのProviderで.familyを使う。

1をやっただけだと「ページの状態を維持する」だけなので、こんな感じになる。

最後に表示したページのデータがそのまま表示されちゃっているね。
当然期待通りの動きじゃないので、直していきたい。

こうなっちゃってる原因は、ViewModelのインスタンスがタブのページ全てで共有されてしまっていることにある。

■ ページでViewModelを共有してしまっている例

本来なら、HomeTabPageごとにデータを保持しておきたいので、それぞれにViewModelを生成しておきたい。

■ ページごとにViewModelを生成している例

これをするために、Providerで.familyを使ってあげる。

これを

final homeTabViewModelNotifierProvider =
    ChangeNotifierProvider((ref) => HomeTabViewModel(ref.read));

こう。

final homeTabViewModelNotifierProvider =
    ChangeNotifierProvider.family<HomeTabViewModel, int>(
        (ref, id) => HomeTabViewModel(ref.read, id));

watchしている側も下記の通り修正してあげる。

これを

final viewModel = ref.read(homeTabViewModelNotifierProvider);
final list = ref
    .watch(homeTabViewModelNotifierProvider.select((value) => value.list));

こう。

final viewModel = ref.read(homeTabViewModelNotifierProvider(widget.index));
final list = ref.watch(homeTabViewModelNotifierProvider(widget.index)
    .select((value) => value.list));

これで、idごとにHomeTabViewModelのインスタンスが生成されるね！
完成〜🎉

まとめ

TabViewのページ切り替え時に再ビルドが走らないようにするために必要な修正は下記の2点。

1. タブで表示するページのクラスにAutomaticKeepAliveClientMixinをwithする。
2. ViewModelのProviderで.familyを使う。

修正後の挙動はこんな感じ。

ちゃんとデータがキャッシュされて、再ビルドされずに表示されているね👍
いい感じ！

今回のサンプルはここで公開しているので、わからなかったら見てみてね。
コミットごとに見ればどう修正すればいいかわかると思うわ🐶

おわり。

参考