💄 Optimized tab router

lib/route.dart

@@ -9,15 +9,13 @@ class AppRouter extends RootStackRouter {
   @override
   List<AutoRoute> get routes => [
     AutoRoute(
-      page: ExploreRoute.page,
+      page: TabsRoute.page,
       path: '/',
-      meta: {'bottomNav': true},
       initial: true,
-    ),
-    AutoRoute(
-      page: AccountRoute.page,
-      path: '/account',
-      meta: {'bottomNav': true},
+      children: [
+        AutoRoute(page: ExploreRoute.page, path: 'explore'),
+        AutoRoute(page: AccountRoute.page, path: 'account'),
+      ],
     ),
     AutoRoute(page: LoginRoute.page, path: '/auth/login'),
     AutoRoute(page: CreateAccountRoute.page, path: '/auth/create-account'),

lib/route.gr.dart

@@ -9,21 +9,22 @@
 // coverage:ignore-file
 
 // ignore_for_file: no_leading_underscores_for_library_prefixes
-import 'package:auto_route/auto_route.dart' as _i5;
+import 'package:auto_route/auto_route.dart' as _i6;
 import 'package:island/screens/account.dart' as _i1;
 import 'package:island/screens/auth/create_account.dart' as _i2;
 import 'package:island/screens/auth/login.dart' as _i4;
+import 'package:island/screens/auth/tabs.dart' as _i5;
 import 'package:island/screens/explore.dart' as _i3;
 
 /// generated route for
 /// [_i1.AccountScreen]
-class AccountRoute extends _i5.PageRouteInfo<void> {
-  const AccountRoute({List<_i5.PageRouteInfo>? children})
+class AccountRoute extends _i6.PageRouteInfo<void> {
+  const AccountRoute({List<_i6.PageRouteInfo>? children})
     : super(AccountRoute.name, initialChildren: children);
 
   static const String name = 'AccountRoute';
 
-  static _i5.PageInfo page = _i5.PageInfo(
+  static _i6.PageInfo page = _i6.PageInfo(
     name,
     builder: (data) {
       return const _i1.AccountScreen();
@@ -33,13 +34,13 @@ class AccountRoute extends _i5.PageRouteInfo<void> {
 
 /// generated route for
 /// [_i2.CreateAccountScreen]
-class CreateAccountRoute extends _i5.PageRouteInfo<void> {
-  const CreateAccountRoute({List<_i5.PageRouteInfo>? children})
+class CreateAccountRoute extends _i6.PageRouteInfo<void> {
+  const CreateAccountRoute({List<_i6.PageRouteInfo>? children})
     : super(CreateAccountRoute.name, initialChildren: children);
 
   static const String name = 'CreateAccountRoute';
 
-  static _i5.PageInfo page = _i5.PageInfo(
+  static _i6.PageInfo page = _i6.PageInfo(
     name,
     builder: (data) {
       return const _i2.CreateAccountScreen();
@@ -49,13 +50,13 @@ class CreateAccountRoute extends _i5.PageRouteInfo<void> {
 
 /// generated route for
 /// [_i3.ExploreScreen]
-class ExploreRoute extends _i5.PageRouteInfo<void> {
-  const ExploreRoute({List<_i5.PageRouteInfo>? children})
+class ExploreRoute extends _i6.PageRouteInfo<void> {
+  const ExploreRoute({List<_i6.PageRouteInfo>? children})
     : super(ExploreRoute.name, initialChildren: children);
 
   static const String name = 'ExploreRoute';
 
-  static _i5.PageInfo page = _i5.PageInfo(
+  static _i6.PageInfo page = _i6.PageInfo(
     name,
     builder: (data) {
       return const _i3.ExploreScreen();
@@ -65,16 +66,32 @@ class ExploreRoute extends _i5.PageRouteInfo<void> {
 
 /// generated route for
 /// [_i4.LoginScreen]
-class LoginRoute extends _i5.PageRouteInfo<void> {
-  const LoginRoute({List<_i5.PageRouteInfo>? children})
+class LoginRoute extends _i6.PageRouteInfo<void> {
+  const LoginRoute({List<_i6.PageRouteInfo>? children})
     : super(LoginRoute.name, initialChildren: children);
 
   static const String name = 'LoginRoute';
 
-  static _i5.PageInfo page = _i5.PageInfo(
+  static _i6.PageInfo page = _i6.PageInfo(
     name,
     builder: (data) {
       return const _i4.LoginScreen();
     },
   );
 }
+
+/// generated route for
+/// [_i5.TabsScreen]
+class TabsRoute extends _i6.PageRouteInfo<void> {
+  const TabsRoute({List<_i6.PageRouteInfo>? children})
+    : super(TabsRoute.name, initialChildren: children);
+
+  static const String name = 'TabsRoute';
+
+  static _i6.PageInfo page = _i6.PageInfo(
+    name,
+    builder: (data) {
+      return const _i5.TabsScreen();
+    },
+  );
+}

lib/screens/auth/tabs.dart

@@ -0,0 +1,39 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:island/route.gr.dart';
+import 'package:lucide_icons/lucide_icons.dart';
+
+@RoutePage()
+class TabsScreen extends StatelessWidget {
+  const TabsScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return AutoTabsRouter.pageView(
+      routes: const [ExploreRoute(), AccountRoute()],
+      builder: (context, child, _) {
+        final tabsRouter = AutoTabsRouter.of(context);
+        return Scaffold(
+          extendBody: true,
+          extendBodyBehindAppBar: true,
+          backgroundColor: Colors.transparent,
+          body: child,
+          bottomNavigationBar: NavigationBar(
+            selectedIndex: tabsRouter.activeIndex,
+            onDestinationSelected: tabsRouter.setActiveIndex,
+            destinations: [
+              NavigationDestination(
+                label: 'Explore',
+                icon: const Icon(LucideIcons.compass),
+              ),
+              NavigationDestination(
+                label: 'Account',
+                icon: const Icon(LucideIcons.userCircle),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

lib/widgets/app_scaffold.dart

@@ -4,11 +4,8 @@ import 'package:auto_route/auto_route.dart';
 import 'package:bitsdojo_window/bitsdojo_window.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:island/route.dart';
-import 'package:island/route.gr.dart';
-import 'package:lucide_icons/lucide_icons.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:responsive_framework/responsive_framework.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -82,54 +79,7 @@ class WindowScaffold extends StatelessWidget {
       );
     }
 
-    return Scaffold(
-      extendBody: true,
-      extendBodyBehindAppBar: true,
-      backgroundColor: Colors.transparent,
-      body: SizedBox.expand(child: child),
-      key: rootScaffoldKey,
-      bottomNavigationBar:
-          router.current.meta['bottomNav'] == true || router.currentPath == '/'
-              ? AppBottomNavigationBar(router: router)
-              : null,
-    );
-  }
-}
-
-class AppBottomNavigationBar extends HookConsumerWidget {
-  const AppBottomNavigationBar({super.key, required this.router});
-
-  final AppRouter router;
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final destination = useState(0);
-
-    return NavigationBar(
-      selectedIndex: destination.value,
-      destinations: [
-        NavigationDestination(
-          icon: Icon(LucideIcons.compass),
-          label: 'Explore',
-        ),
-        NavigationDestination(
-          icon: Icon(LucideIcons.userCircle),
-          label: 'Account',
-        ),
-      ],
-      onDestinationSelected: (idx) {
-        switch (idx) {
-          case 0:
-            destination.value = idx;
-            router.replace(ExploreRoute());
-            break;
-          case 1:
-            destination.value = idx;
-            router.replace(AccountRoute());
-            break;
-        }
-      },
-    );
+    return child;
   }
 }