[Flutter] BottomNavigationBar のMaterialとCupertinoの振る舞いの違い

ねらい

bottom navigation bar のサンプルとして material と cupertinoの2種類のサンプルが用意されておりますが、見た目以外での、振る舞いの違いをメモとして残します。

公式のドキュメント

• material
  https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
• cupertino
  https://api.flutter.dev/flutter/cupertino/CupertinoTabBar-class.html

サンプル

https://github.com/buntou/bottom_navigation_bar_sample

• material_scaffold_navigation_bar.dart
• cupertino_scaffold_navigation_bar.dart
  の2種類のファイルで、それぞれで作成する時のサンプルを用意しました。

main.dart の child を切り替えてそれぞれのパターンを確認できます。

      // child: AppWithMaterialScaffoldNavigationBar(),
      child: AppWithCupertinoScaffoldNavigationBar(),

タブ切替時の振る舞いの違い

Material

Pageとしてそれぞれのタブを作成しています。なので、タブを切り替えるたびにそのページがビルドされます。

Cupertino

TabViewとしてそれぞれのページを作成しています。なので、一度ビルドされた後は、タブを切り替えてもページのビルドは発生しません。

違いが何に影響するのか

MaterialBottomNavigation のように、タブを切り替えるたびにページがビルドされるとなると、APIで情報を取得して表示しているページの場合、切り替えるたびにAPIリクエストを行い、ページを生成することになります。

なので、情報の鮮度が高く保てますがその分APIの待ちなどで画面が生成できるまでユーザーに待ちの時間を作る可能性も発生します。

一方、CupertinoBottomNavigation の場合だと、他に画面更新のトリガーを入れない限り、最初に取得した情報のままになってしまいます。

その場合には、pull_to_refresh などで行えるように画面を構築するのも良いかもしれませんね。

https://pub.dev/packages/pull_to_refresh

おわりに

BottomNavigationをどう作るか以外にも、各画面の切り替え時の遷移の仕方や、go_routerなどの遷移自体に関する管理をどう作るか、工夫ができると思いますので勉強中です。