Flutter MVVM ~Bottom Navigation Bar~

MVVM設計でのBottomNavigationBar実装について

環境

ステート管理: riverpod
アーキテクチャー: MVVM

想定フォルダー構成:
lib
|_ ui
|_ nav _ bottom_nav.dart
|_ bottom_nav_view_model.dart
|_ home_page.dart
|_ setting_page.dart

実装方法

基本的なMVVMの状態管理方法として、変数や関数はViewModelが保持することが前提。
Viewは基本的にStatelessWidgetとするため画面の更新方法がない。
そのためChangeNotifierで画面に更新を通知し、再描画を行う手法を取る。

• bottom_nav_view_model.dart

final bottomNavVMProvider = ChangeNotifierProvider((ref) => BottomNavViewModel());

class BottomNavViewModel extends ChangeNotifier {
   int _currentIdx = 0;
   int get currentIdx => _currentIdx;
   
   void updateIdx(int newIdx){
   	_currentIdx = newIdx;
   	notifyListener();
   }
}

• bottom_nav.dart

class HomeView extends ConsumerWidget {
 const HomeView({Key? key}): super(key: key);

 @override
 Widget build(BuildContext context, WidgetRef ref) {
   // 基本的にwatchを使う
   final vm = ref.watch(bottomNavVMProvider);
   List _widgets = [
       HomePage(),
       SettingsPage(),
       ];

   return Scaffold(
       body: _widgets[vm.currentIdx]
       bottomNavigationBar: BottomNavigationBar(
       items: [
   	    BottomNavigationBarItem(
   		    icon: Icon(Icons.book),
   		    label: 'Home',
   	    ),
   	    BottomNavigationBarItem(
   		    icon: Icon(Icons.setting),
   		    label: 'Settings',
   	    ),
       ]
       //onTapはFunction(int)型を取るため、値がupdateIdxに渡せされる
       onTap: vm.updateIdx,
       currentIndex: vm.currentIdx,
   );
   )
 }
}

以上。