Feature: Introduce GlassBottomBar for enhanced navigation with a glass effect and integrate it into AppShell for improved UI aesthetics.

2025-09-27 15:39:32 +02:00
parent ff357d4a4a
commit 2bdb094819
2 changed files with 143 additions and 17 deletions
--- a/finlog_app/app/lib/core/ui/glas_bottom_bar.dart
+++ b/finlog_app/app/lib/core/ui/glas_bottom_bar.dart
@@ -0,0 +1,129 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+class GlassBottomBarItem {
+  final IconData icon;
+  final String label;
+  final String route;
+
+  const GlassBottomBarItem({
+    required this.icon,
+    required this.label,
+    required this.route,
+  });
+}
+
+class GlassBottomBar extends StatelessWidget {
+  const GlassBottomBar({
+    super.key,
+    required this.items,
+    required this.currentPath,
+    required this.onSelect,
+  });
+
+  final List<GlassBottomBarItem> items;
+  final String currentPath;
+  final void Function(String route) onSelect;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    bool isSelected(String route) => currentPath.startsWith(route);
+
+    return SafeArea(
+      minimum: const EdgeInsets.only(left: 12, right: 12, bottom: 12),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(20),
+        child: BackdropFilter(
+          filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
+          child: Container(
+            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
+            decoration: BoxDecoration(
+              color: cs.surface.withOpacity(0.65), // glass tint
+              borderRadius: BorderRadius.circular(20),
+              border: Border.all(color: cs.outline.withOpacity(0.18)),
+              boxShadow: [
+                BoxShadow(
+                  color: cs.shadow.withOpacity(0.08),
+                  blurRadius: 18,
+                  offset: const Offset(0, 6),
+                ),
+              ],
+            ),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                for (final it in items)
+                  _GlassItem(
+                    icon: it.icon,
+                    label: it.label,
+                    selected: isSelected(it.route),
+                    onTap: () => onSelect(it.route),
+                  ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _GlassItem extends StatelessWidget {
+  const _GlassItem({
+    required this.icon,
+    required this.label,
+    required this.selected,
+    required this.onTap,
+  });
+
+  final IconData icon;
+  final String label;
+  final bool selected;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+
+    return Expanded(
+      child: GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onTap: onTap,
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 180),
+          curve: Curves.easeOut,
+          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
+          decoration: BoxDecoration(
+            color: selected
+                ? cs.primaryContainer.withOpacity(0.35)
+                : Colors.transparent,
+            borderRadius: BorderRadius.circular(14),
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(
+                icon,
+                size: 22,
+                color: selected ? cs.onPrimaryContainer : cs.onSurfaceVariant,
+              ),
+              const SizedBox(height: 4),
+              Text(
+                label,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: TextStyle(
+                  fontSize: 11,
+                  fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
+                  color: selected ? cs.onPrimaryContainer : cs.onSurfaceVariant,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}