production

lib/widget/Bottom_page.dart

@@ -10,6 +10,7 @@ import 'package:miler/views/Dashboard/activity/activity_page.dart';
 import 'package:miler/views/Dashboard/profile/Profilepage.dart';
 import 'package:miler/views/helpers/constants/Font_constant.dart';
 import 'package:miler/views/helpers/constants/Colorconstants.dart';
+import 'package:miler/views/helpers/constants/narrative.dart';
 import 'package:miler/views/helpers/constants/design_constants.dart';
 import 'package:miler/data/service_profile.dart';
 
@@ -39,9 +40,14 @@ class BottomPage extends StatefulWidget {
   /// scroll position and state, which is why the IndexedStack is there.
   static final ValueNotifier<int> currentTab = ValueNotifier<int>(0);
 
-  /// Height of the floating bar at rest, and the gap to the screen edge.
+  /// Height of the bar at rest.
   static const double navBarHeight = 66;
-  static const double navBarGap = 10;
+
+  /// The gap the bar used to float above the screen's edge. Zero now: it is
+  /// docked, so there is nothing between it and the bottom of the phone. Kept
+  /// as a name because [bottomInset] and several pages read it, and a bar that
+  /// changes where it sits should not also change how many numbers describe it.
+  static const double navBarGap = 0;
 
   /// Height of the bar once the rider has scrolled into a list.
   ///
@@ -304,49 +310,67 @@ class _BottomPageState extends State<BottomPage> with TickerProviderStateMixin {
                 ),
               ),
 
-              // ── Floating frosted bar, compacting rather than leaving ──
+              // ── Docked, opaque, and full width ──
               //
-              // Every dimension is lerped off one animation value, so the
-              // height, the radius, the inset and the contents shrink together
-              // instead of each running its own clock.
+              // It was a frosted pill floating 10 points off the bottom with a
+              // 16-point margin down each side. Two costs, and the second is
+              // the one that decided it.
+              //
+              // **It was not where a nav bar is.** Every other app on the
+              // rider's phone puts the tabs on the bottom edge; a pill hovering
+              // above it reads as a widget over the page rather than as the
+              // frame of the app, and the strip of page visible under it is a
+              // gap nothing lives in.
+              //
+              // **It was glass.** A 20-sigma backdrop blur, permanently on
+              // screen, over a scrolling list — the most expensive thing this
+              // app drew, on the one surface that is never not drawn.
+              //
+              // It still compacts rather than leaving: labels go, the icons
+              // draw in, the bar shortens. A control that vanishes is not a
+              // smaller control, it is a missing one.
               AnimatedBuilder(
                 animation: Listenable.merge([_compact, _pillAnim]),
                 builder: (context, _) {
                   final k = _compact.value;
-                  final side = lerpDouble(16.w, 30.w, k)!;
+                  final side = 6.w;
                   final height = lerpDouble(
                     BottomPage.navBarHeight.h,
                     BottomPage.navBarHeightCompact.h,
                     k,
                   )!;
-                  final radius = lerpDouble(32.r, 23.r, k)!;
+                  final radius = lerpDouble(26.r, 20.r, k)!;
                   final pos = _pillPos;
 
                   return Positioned(
-                    left: side,
-                    right: side,
-                    bottom:
-                        MediaQuery.of(context).padding.bottom +
-                        BottomPage.navBarGap.h,
-                    child: ClipRRect(
-                      borderRadius: BorderRadius.circular(radius),
-                      child: BackdropFilter(
-                        filter: ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    child: Padding(
+                      padding: EdgeInsets.only(
+                        bottom: MediaQuery.of(context).padding.bottom,
+                      ),
+                      child: ClipRRect(
+                        borderRadius: BorderRadius.vertical(
+                          top: Radius.circular(radius),
+                        ),
                         child: DecoratedBox(
                           decoration: BoxDecoration(
-                            color: ColorConstants.pureSurface.withValues(
-                              alpha: 0.82,
+                            color: Narrative.card,
+                            borderRadius: BorderRadius.vertical(
+                              top: Radius.circular(radius),
                             ),
-                            borderRadius: BorderRadius.circular(radius),
-                            border: Border.all(
-                              color: Colors.black.withValues(alpha: 0.06),
-                              width: 1.0,
+                            border: Border(
+                              top: BorderSide(
+                                color: Narrative.cardBorder,
+                                width: 1.0,
+                              ),
                             ),
                             boxShadow: [
                               BoxShadow(
-                                color: Colors.black.withValues(alpha: 0.07),
-                                blurRadius: 28,
-                                offset: const Offset(0, 8),
+                                color: Colors.black.withValues(alpha: 0.05),
+                                blurRadius: 20,
+                                offset: const Offset(0, -4),
                               ),
                             ],
                           ),