Add navigate to view group action

lib/framework/action.dart

@@ -9,6 +9,7 @@ import 'package:ensemble/framework/event.dart';
 import 'package:ensemble/framework/extensions.dart';
 import 'package:ensemble/framework/permissions_manager.dart';
 import 'package:ensemble/framework/scope.dart';
+import 'package:ensemble/framework/view/bottom_nav_page_group.dart';
 import 'package:ensemble/framework/view/page_group.dart';
 import 'package:ensemble/framework/widget/view_util.dart';
 import 'package:ensemble/screen_controller.dart';
@@ -157,7 +158,8 @@ class NavigateViewGroupAction extends EnsembleAction {
 
   @override
   Future<void> execute(BuildContext context, ScopeManager scopeManager) {
-    pageNotifier.updatePage(_viewIndex);
+    PageGroupWidget.getPageController(context)!.jumpToPage(_viewIndex);
+    bottomNavBarNotifier.updatePage(_viewIndex);
     return Future.value(null);
   }
 }

lib/framework/view/bottom_nav_page_group.dart

@@ -15,6 +15,19 @@ import 'package:ensemble/util/utils.dart';
 import 'package:ensemble/framework/widget/icon.dart' as ensemble;
 import 'package:flutter/material.dart';
 
+class BottomNavBarNotifier extends ChangeNotifier {
+  int _viewIndex = 0;
+
+  int get viewIndex => _viewIndex;
+
+  void updatePage(int index) {
+    _viewIndex = index;
+    notifyListeners();
+  }
+}
+
+final bottomNavBarNotifier = BottomNavBarNotifier();
+
 class FABBottomAppBarItem {
   FABBottomAppBarItem({
     required this.icon,
@@ -99,6 +112,10 @@ class _BottomNavPageGroupState extends State<BottomNavPageGroup>
       floatingAlignment =
           FloatingAlignment.values.byName(fabMenuItem!.floatingAlignment);
     }
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      bottomNavBarNotifier.updatePage(widget.selectedPage);
+    });
   }
 
   @override
@@ -172,25 +189,33 @@ class _BottomNavPageGroupState extends State<BottomNavPageGroup>
     final notchColor = Utils.getColor(widget.menu.styles?['notchColor']) ??
         Theme.of(context).scaffoldBackgroundColor;
 
-    return Scaffold(
-      resizeToAvoidBottomInset: true,
-      backgroundColor: notchColor,
-      bottomNavigationBar: _buildBottomNavBar(),
-      floatingActionButtonLocation: floatingAlignment == FloatingAlignment.none
-          ? null
-          : floatingAlignment.location,
-      floatingActionButton: _buildFloatingButton(),
-      body: PageGroupWidget(
-        scopeManager: widget.scopeManager,
-        child: BottomNavPageView(
-          controller: controller,
-          children: widget.children,
+    return PageGroupWidget(
+      scopeManager: widget.scopeManager,
+      pageController: PageController(initialPage: widget.selectedPage),
+      child: Scaffold(
+        resizeToAvoidBottomInset: true,
+        backgroundColor: notchColor,
+        bottomNavigationBar: _buildBottomNavBar(),
+        floatingActionButtonLocation:
+            floatingAlignment == FloatingAlignment.none
+                ? null
+                : floatingAlignment.location,
+        floatingActionButton: _buildFloatingButton(),
+        body: Builder(
+          builder: (context) {
+            final controller = PageGroupWidget.getPageController(context);
+
+            return BottomNavPageView(
+              controller: controller ?? PageController(),
+              children: widget.children,
+            );
+          },
         ),
       ),
     );
   }
 
-  EnsembleBottomAppBar? _buildBottomNavBar() {
+  Widget? _buildBottomNavBar() {
     List<FABBottomAppBarItem> navItems = [];
 
     final unselectedColor = Utils.getColor(widget.menu.styles?['color']) ??
@@ -232,20 +257,30 @@ class _BottomNavPageGroupState extends State<BottomNavPageGroup>
       );
     }
 
-    return EnsembleBottomAppBar(
-      selectedIndex: widget.selectedPage,
-      backgroundColor: Utils.getColor(widget.menu.styles?['backgroundColor']) ??
-          Colors.white,
-      height: Utils.optionalDouble(widget.menu.styles?['height'] ?? 60),
-      padding: widget.menu.styles?['padding'],
-      color: unselectedColor,
-      selectedColor: selectedColor,
-      notchedShape: const CircularNotchedRectangle(),
-      onTabSelected: controller.jumpToPage,
-      items: navItems,
-      isFloating: fabMenuItem != null,
-      floatingAlignment: floatingAlignment,
-      floatingMargin: floatingMargin,
+    return ListenableBuilder(
+      listenable: bottomNavBarNotifier,
+      builder: (context, _) {
+        final viewIndex = bottomNavBarNotifier.viewIndex;
+
+        return EnsembleBottomAppBar(
+          key: UniqueKey(),
+          selectedIndex: viewIndex,
+          backgroundColor:
+              Utils.getColor(widget.menu.styles?['backgroundColor']) ??
+                  Colors.white,
+          height: Utils.optionalDouble(widget.menu.styles?['height'] ?? 60),
+          padding: widget.menu.styles?['padding'],
+          color: unselectedColor,
+          selectedColor: selectedColor,
+          notchedShape: const CircularNotchedRectangle(),
+          onTabSelected: (index) =>
+              PageGroupWidget.getPageController(context)?.jumpToPage(index),
+          items: navItems,
+          isFloating: fabMenuItem != null,
+          floatingAlignment: floatingAlignment,
+          floatingMargin: floatingMargin,
+        );
+      },
     );
   }
 

lib/framework/view/page_group.dart

@@ -18,19 +18,6 @@ import 'package:ensemble/framework/extensions.dart';
 import '../widget/custom_view.dart';
 import 'bottom_nav_page_group.dart';
 
-class PageGroupNotifier extends ChangeNotifier {
-  int _viewIndex = 0;
-
-  int get viewIndex => _viewIndex;
-
-  void updatePage(int index) {
-    _viewIndex = index;
-    notifyListeners();
-  }
-}
-
-final pageNotifier = PageGroupNotifier();
-
 /// a collection of pages grouped under a navigation menu
 class PageGroup extends StatefulWidget {
   const PageGroup(
@@ -56,15 +43,18 @@ class PageGroup extends StatefulWidget {
 /// We need this because the menu (i.e. drawer) is determined at the PageGroup
 /// level, but need to be injected under each child Page to render.
 class PageGroupWidget extends DataScopeWidget {
-  const PageGroupWidget(
-      {super.key,
-      required super.scopeManager,
-      required super.child,
-      this.navigationDrawer,
-      this.navigationEndDrawer});
+  const PageGroupWidget({
+    super.key,
+    required super.scopeManager,
+    required super.child,
+    this.navigationDrawer,
+    this.navigationEndDrawer,
+    this.pageController,
+  });
 
   final Drawer? navigationDrawer;
   final Drawer? navigationEndDrawer;
+  final PageController? pageController;
 
   static Drawer? getNavigationDrawer(BuildContext context) => context
       .dependOnInheritedWidgetOfExactType<PageGroupWidget>()
@@ -74,6 +64,10 @@ class PageGroupWidget extends DataScopeWidget {
       .dependOnInheritedWidgetOfExactType<PageGroupWidget>()
       ?.navigationEndDrawer;
 
+  static PageController? getPageController(BuildContext context) => context
+      .dependOnInheritedWidgetOfExactType<PageGroupWidget>()
+      ?.pageController;
+
   /// return the ScopeManager which includes the dataContext
   /// TODO: have to repeat this function in DataScopeWidget?
   static ScopeManager? getScope(BuildContext context) {
@@ -126,14 +120,6 @@ class PageGroupState extends State<PageGroup> with MediaQueryCapability {
 
   @override
   Widget build(BuildContext context) {
-    return ListenableBuilder(
-      listenable: pageNotifier,
-      builder: (context, _) => buildPageGroupChild(),
-    );
-  }
-
-  Widget buildPageGroupChild() {
-    final selectedPage = pageNotifier.viewIndex;
     // skip rendering the menu if only 1 menu item, just the content itself
     if (widget.menu.menuItems.length == 1) {
       return pageWidgets[0];
@@ -146,19 +132,16 @@ class PageGroupState extends State<PageGroup> with MediaQueryCapability {
         Drawer? drawer = _buildDrawer(context, widget.menu);
         bool atStart = (widget.menu as DrawerMenu).atStart;
         return PageGroupWidget(
-            key: UniqueKey(),
             scopeManager: _scopeManager,
             navigationDrawer: atStart ? drawer : null,
             navigationEndDrawer: !atStart ? drawer : null,
             child: pageWidgets[selectedPage]);
       } else if (widget.menu is SidebarMenu) {
         return PageGroupWidget(
-            key: UniqueKey(),
             scopeManager: _scopeManager,
             child: buildSidebarNavigation(context, widget.menu as SidebarMenu));
       } else if (widget.menu is BottomNavBarMenu) {
         return BottomNavPageGroup(
-          key: UniqueKey(),
           scopeManager: _scopeManager,
           selectedPage: selectedPage,
           menu: widget.menu,