✨ Blurry tab background

♻️ Refactored tabs

lib/screens/account.dart

@@ -66,6 +66,7 @@ class AccountScreen extends HookConsumerWidget {
     }
 
     return AppScaffold(
+      extendBody: false, // Prevent conflicts with tabs navigation
       noBackground: isWide,
       appBar: AppBar(title: const Text('account').tr()),
       body: SingleChildScrollView(

lib/screens/auth/tabs.dart

@@ -1,161 +0,0 @@
-import 'dart:developer';
-
-import 'package:auto_route/auto_route.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:gap/gap.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:island/route.dart';
-import 'package:island/route.gr.dart';
-import 'package:island/screens/notification.dart';
-import 'package:island/services/responsive.dart';
-import 'package:material_symbols_icons/symbols.dart';
-
-final currentRouteProvider = StateProvider<String?>((ref) => null);
-
-class TabNavigationObserver extends AutoRouterObserver {
-  Function(String?) onChange;
-  TabNavigationObserver({required this.onChange});
-
-  @override
-  void didPush(Route route, Route? previousRoute) {
-    log('pushed ${previousRoute?.settings.name} -> ${route.settings.name}');
-    if (route is DialogRoute) return;
-    Future(() {
-      onChange(route.settings.name);
-    });
-  }
-
-  @override
-  void didPop(Route route, Route? previousRoute) {
-    log('popped ${route.settings.name} -> ${previousRoute?.settings.name}');
-    if (route is DialogRoute) return;
-    Future(() {
-      onChange(previousRoute?.settings.name);
-    });
-  }
-}
-
-@RoutePage()
-class TabsNavigationWidget extends HookConsumerWidget {
-  final Widget child;
-  final AppRouter router;
-  const TabsNavigationWidget({
-    super.key,
-    required this.child,
-    required this.router,
-  });
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final useHorizontalLayout = isWideScreen(context);
-    final currentRoute = ref.watch(currentRouteProvider);
-
-    final notificationUnreadCount = ref.watch(
-      notificationUnreadCountNotifierProvider,
-    );
-
-    int activeIndex = 0;
-
-    final destinations = [
-      NavigationDestination(
-        label: 'explore'.tr(),
-        icon: const Icon(Symbols.explore),
-      ),
-      NavigationDestination(label: 'chat'.tr(), icon: const Icon(Symbols.chat)),
-      NavigationDestination(
-        label: 'realms'.tr(),
-        icon: const Icon(Symbols.workspaces),
-      ),
-      NavigationDestination(
-        label: 'account'.tr(),
-        icon: Badge.count(
-          count: notificationUnreadCount.value ?? 0,
-          isLabelVisible: (notificationUnreadCount.value ?? 0) > 0,
-          child: const Icon(Symbols.account_circle),
-        ),
-      ),
-    ];
-
-    final routes = <PageRouteInfo>[
-      ExploreRoute(),
-      ChatListRoute(),
-      RealmListRoute(),
-      AccountRoute(),
-    ];
-    final routeNames = [
-      ExploreRoute.name,
-      ExploreShellRoute.name,
-      ChatListRoute.name,
-      RealmListRoute.name,
-      AccountRoute.name,
-      ChatShellRoute.name,
-      AccountShellRoute.name,
-    ];
-
-    activeIndex = routes.indexWhere((route) => route.routeName == currentRoute);
-    if (activeIndex == -1) {
-      activeIndex = 0;
-    }
-
-    final isTabRoute = routeNames.any((route) {
-      return route == currentRoute;
-    });
-
-    return Scaffold(
-      extendBodyBehindAppBar: true,
-      backgroundColor: Colors.transparent,
-      body:
-          useHorizontalLayout
-              ? Row(
-                children: [
-                  ColoredBox(
-                    color: Theme.of(context).colorScheme.surface,
-                    child: Column(
-                      children: [
-                        Gap(MediaQuery.of(context).padding.top + 8),
-                        Expanded(
-                          child: NavigationRail(
-                            selectedIndex: activeIndex,
-                            onDestinationSelected: (index) {
-                              router.replace(routes[index]);
-                            },
-                            // labelType: NavigationRailLabelType.all,
-                            destinations:
-                                destinations
-                                    .map(
-                                      (d) => NavigationRailDestination(
-                                        icon: d.icon,
-                                        label: Text(d.label),
-                                      ),
-                                    )
-                                    .toList(),
-                          ),
-                        ),
-                        Gap(MediaQuery.of(context).padding.bottom + 8),
-                      ],
-                    ),
-                  ),
-                  VerticalDivider(
-                    color: Theme.of(context).dividerColor,
-                    width: 1 / MediaQuery.of(context).devicePixelRatio,
-                  ),
-                  Expanded(child: child),
-                ],
-              )
-              : child,
-      bottomNavigationBar:
-          !useHorizontalLayout && isTabRoute
-              ? NavigationBar(
-                height: 56,
-                labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
-                selectedIndex: activeIndex,
-                onDestinationSelected: (index) {
-                  router.replace(routes[index]);
-                },
-                destinations: destinations,
-              )
-              : null,
-    );
-  }
-}

lib/screens/chat/chat.dart

@@ -27,6 +27,7 @@ import 'package:island/widgets/content/cloud_files.dart';
 import 'package:island/widgets/content/sheet.dart';
 import 'package:island/widgets/realms/selection_dropdown.dart';
 import 'package:island/widgets/response.dart';
+import 'package:island/screens/tabs.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:relative_time/relative_time.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
@@ -241,6 +242,7 @@ class ChatListScreen extends HookConsumerWidget {
     }
 
     return AppScaffold(
+      extendBody: false, // Prevent conflicts with tabs navigation
       appBar: AppBar(
         title: Text('chat').tr(),
         bottom: TabBar(
@@ -339,6 +341,7 @@ class ChatListScreen extends HookConsumerWidget {
         },
         child: const Icon(Symbols.add),
       ),
+      floatingActionButtonLocation: TabbedFabLocation(context),
       body: Stack(
         children: [
           Column(

lib/screens/explore.dart

@@ -12,6 +12,7 @@ import 'package:island/models/post.dart';
 import 'package:island/widgets/check_in.dart';
 import 'package:island/widgets/post/post_item.dart';
 import 'package:island/widgets/tour/tour.dart';
+import 'package:island/screens/tabs.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:riverpod_paging_utils/riverpod_paging_utils.dart';
@@ -45,6 +46,8 @@ class ExploreShellScreen extends ConsumerWidget {
   }
 }
 
+
+
 @RoutePage()
 class ExploreScreen extends ConsumerWidget {
   final bool isAside;
@@ -61,6 +64,7 @@ class ExploreScreen extends ConsumerWidget {
 
     return TourTriggerWidget(
       child: AppScaffold(
+        extendBody: false, // Prevent conflicts with tabs navigation
         appBar: AppBar(title: const Text('explore').tr()),
         floatingActionButton: FloatingActionButton(
           heroTag: Key("explore-page-fab"),
@@ -73,7 +77,7 @@ class ExploreScreen extends ConsumerWidget {
           },
           child: const Icon(Symbols.edit),
         ),
-        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
+        floatingActionButtonLocation: TabbedFabLocation(context),
         body: RefreshIndicator(
           onRefresh: () => Future.sync(activitiesNotifier.forceRefresh),
           child: PagingHelperView(

lib/screens/realm/realms.dart

@@ -18,6 +18,7 @@ import 'package:island/widgets/app_scaffold.dart';
 import 'package:island/widgets/content/cloud_files.dart';
 import 'package:island/widgets/content/sheet.dart';
 import 'package:island/widgets/response.dart';
+import 'package:island/screens/tabs.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:styled_widget/styled_widget.dart';
@@ -41,6 +42,7 @@ class RealmListScreen extends HookConsumerWidget {
     final realmInvites = ref.watch(realmInvitesProvider);
 
     return AppScaffold(
+      extendBody: false, // Prevent conflicts with tabs navigation
       noBackground: false,
       appBar: AppBar(
         title: const Text('realms').tr(),
@@ -83,6 +85,7 @@ class RealmListScreen extends HookConsumerWidget {
           });
         },
       ),
+      floatingActionButtonLocation: TabbedFabLocation(context),
       body: RefreshIndicator(
         child: realms.when(
           data:

lib/screens/tabs.dart

@@ -0,0 +1,137 @@
+import 'dart:ui';
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:island/route.gr.dart';
+import 'package:island/screens/notification.dart';
+import 'package:island/services/responsive.dart';
+import 'package:material_symbols_icons/symbols.dart';
+
+@RoutePage()
+class TabsScreen extends HookConsumerWidget {
+  const TabsScreen({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final useHorizontalLayout = isWideScreen(context);
+
+    final notificationUnreadCount = ref.watch(
+      notificationUnreadCountNotifierProvider,
+    );
+
+    final destinations = [
+      NavigationDestination(
+        label: 'explore'.tr(),
+        icon: const Icon(Symbols.explore),
+      ),
+      NavigationDestination(label: 'chat'.tr(), icon: const Icon(Symbols.chat)),
+      NavigationDestination(
+        label: 'realms'.tr(),
+        icon: const Icon(Symbols.workspaces),
+      ),
+      NavigationDestination(
+        label: 'account'.tr(),
+        icon: Badge.count(
+          count: notificationUnreadCount.value ?? 0,
+          isLabelVisible: (notificationUnreadCount.value ?? 0) > 0,
+          child: const Icon(Symbols.account_circle),
+        ),
+      ),
+    ];
+
+    final routes = <PageRouteInfo>[
+      ExploreRoute(),
+      ChatListRoute(),
+      RealmListRoute(),
+      AccountRoute(),
+    ];
+
+    return AutoTabsRouter.tabBar(
+      routes: routes,
+      scrollDirection: useHorizontalLayout ? Axis.vertical : Axis.horizontal,
+      physics: const NeverScrollableScrollPhysics(),
+      builder: (context, child, _) {
+        final tabsRouter = AutoTabsRouter.of(context);
+
+        // Check if current route is a tab route
+        final currentRoute = context.router.topRoute;
+        final isTabRoute = routes.any(
+          (route) => route.routeName == currentRoute.name,
+        );
+
+        return Stack(
+          children: [
+            Positioned.fill(child: child),
+            Positioned(
+              left: 0,
+              right: 0,
+              bottom: 0,
+              child: ClipRRect(
+                child: BackdropFilter(
+                  filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
+                  child: Container(
+                    decoration: BoxDecoration(
+                      color: Theme.of(
+                        context,
+                      ).colorScheme.surface.withOpacity(0.8),
+                    ),
+                    child: MediaQuery.removePadding(
+                      context: context,
+                      removeTop: true,
+                      child: NavigationBar(
+                        backgroundColor: Colors.transparent,
+                        shadowColor: Colors.transparent,
+                        overlayColor: WidgetStatePropertyAll(
+                          Colors.transparent,
+                        ),
+                        surfaceTintColor: Colors.transparent,
+                        height: 56,
+                        labelBehavior:
+                            NavigationDestinationLabelBehavior.alwaysHide,
+                        selectedIndex: tabsRouter.activeIndex,
+                        onDestinationSelected: tabsRouter.setActiveIndex,
+                        destinations: destinations,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
+
+class TabbedFabLocation extends FloatingActionButtonLocation {
+  final BuildContext context;
+
+  const TabbedFabLocation(this.context);
+
+  @override
+  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
+    final mediaQuery = MediaQuery.of(context);
+    final safeAreaPadding = mediaQuery.padding;
+
+    // Calculate position with proper safe area considerations
+    final double fabX =
+        scaffoldGeometry.scaffoldSize.width -
+        scaffoldGeometry.floatingActionButtonSize.width -
+        16.0 -
+        safeAreaPadding.right;
+
+    // Use safe area bottom padding + navigation bar height (typically 80px)
+    final double fabY =
+        scaffoldGeometry.scaffoldSize.height -
+        scaffoldGeometry.floatingActionButtonSize.height -
+        scaffoldGeometry.bottomSheetSize.height -
+        safeAreaPadding.bottom -
+        80.0 +
+        16;
+
+    return Offset(fabX, fabY);
+  }
+}