Bottom bar: add frosted glass option (Settings > Appearance)

Translucent fill over a backdrop blur, both platforms and both bar styles. Frosted bars draw over an extended body, so the shell's extendBody and the tab clearance now key off NooBottomBar.drawsBehindBody. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-05 22:16:27 -04:00
parent d6448984d9
commit 944b87b054
9 changed files with 191 additions and 30 deletions
@@ -25,6 +25,69 @@ void main() {
  setUpNooTests();

  group('NooBottomBar', () {
+    for (final style in NooNavStyle.values) {
+      for (final barStyle in NooBottomBarStyle.values) {
+        testNooWidgets(
+          '$style/$barStyle: frosted draws a backdrop blur, solid does not',
+          (tester, theme, c) async {
+            for (final frosted in [false, true]) {
+              await pumpNoo(
+                tester,
+                SizedBox(
+                  width: 360,
+                  height: 120,
+                  child: NooBottomBar(
+                    style: style,
+                    barStyle: barStyle,
+                    frosted: frosted,
+                    destinations: _destinations,
+                    selectedIndex: 0,
+                    onSelected: (_) {},
+                    searchDestination: const NooNavDestination(
+                      icon: LucideIcons.search,
+                      label: 'Search',
+                    ),
+                    onSearchTap: () {},
+                  ),
+                ),
+                theme: theme,
+              );
+              expect(
+                find.byType(BackdropFilter),
+                frosted ? findsWidgets : findsNothing,
+              );
+            }
+          },
+        );
+      }
+    }
+
+    test('drawsBehindBody: floating or frosted', () {
+      expect(
+        NooBottomBar.drawsBehindBody(NooBottomBarStyle.attached, false),
+        isFalse,
+      );
+      expect(
+        NooBottomBar.drawsBehindBody(NooBottomBarStyle.attached, true),
+        isTrue,
+      );
+      expect(
+        NooBottomBar.drawsBehindBody(NooBottomBarStyle.floating, false),
+        isTrue,
+      );
+    });
+
+    test('floating row height is the Android one on both nav styles', () {
+      expect(
+        NooBottomBar.rowHeight(NooNavStyle.ios, NooBottomBarStyle.floating),
+        64,
+      );
+      expect(
+        NooBottomBar.rowHeight(NooNavStyle.ios, NooBottomBarStyle.attached),
+        50,
+      );
+    });
+
    testNooWidgets('android: label sits below the icon, not beside it', (
      tester,
      theme,