new plus button

lib/home_shell.dart

@@ -22,6 +22,7 @@ class HomeShell extends StatefulWidget {
 class _HomeShellState extends State<HomeShell> {
   static const _addIndex = 2;
   static const _shopLogIndex = 3;
+  static const _fabGap = 56.0;
 
   int _index = _addIndex;
   int _revision = 0;
@@ -65,8 +66,15 @@ class _HomeShellState extends State<HomeShell> {
     });
   }
 
+  void _select(int index) {
+    if (index == _index) return;
+    setState(() => _index = index);
+  }
+
   @override
   Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+
     return Scaffold(
       body: switch (_index) {
         0 => ProductsScreen(
@@ -86,29 +94,105 @@ class _HomeShellState extends State<HomeShell> {
           repository: widget.repository,
         ),
       },
-      bottomNavigationBar: NavigationBar(
-        selectedIndex: _index,
-        onDestinationSelected: (index) => setState(() => _index = index),
-        destinations: const [
-          NavigationDestination(
-            icon: Icon(Icons.inventory_2_outlined),
-            selectedIcon: Icon(Icons.inventory_2),
-            label: 'Products',
-          ),
-          NavigationDestination(
-            icon: Icon(Icons.checklist_outlined),
-            selectedIcon: Icon(Icons.checklist),
-            label: 'Lists',
-          ),
-          NavigationDestination(
-            icon: Icon(Icons.add),
-            selectedIcon: Icon(Icons.add_circle),
-            label: 'Add',
-          ),
-          NavigationDestination(
-            icon: Icon(Icons.receipt_long_outlined),
-            selectedIcon: Icon(Icons.receipt_long),
-            label: 'Shop log',
+      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
+      floatingActionButton: FloatingActionButton.small(
+        onPressed: () => _select(_addIndex),
+        tooltip: 'Add',
+        elevation: _index == _addIndex ? 4 : 1,
+        shape: const CircleBorder(),
+        backgroundColor: scheme.primary,
+        foregroundColor: scheme.onPrimary,
+        child: const Icon(Icons.add, size: 24),
+      ),
+      bottomNavigationBar: BottomAppBar(
+        shape: const CircularNotchedRectangle(),
+        notchMargin: 6,
+        elevation: 2,
+        height: 52,
+        padding: EdgeInsets.zero,
+        color: scheme.surfaceContainer,
+        child: Row(
+          children: [
+            Expanded(
+              child: Row(
+                children: [
+                  Expanded(
+                    child: _NavButton(
+                      icon: Icons.inventory_2_outlined,
+                      selectedIcon: Icons.inventory_2,
+                      label: 'Products',
+                      selected: _index == 0,
+                      onTap: () => _select(0),
+                    ),
+                  ),
+                  Expanded(
+                    child: _NavButton(
+                      icon: Icons.checklist_outlined,
+                      selectedIcon: Icons.checklist,
+                      label: 'Lists',
+                      selected: _index == 1,
+                      onTap: () => _select(1),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(width: _fabGap),
+            Expanded(
+              child: _NavButton(
+                icon: Icons.receipt_long_outlined,
+                selectedIcon: Icons.receipt_long,
+                label: 'Shop log',
+                selected: _index == _shopLogIndex,
+                onTap: () => _select(_shopLogIndex),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _NavButton extends StatelessWidget {
+  const _NavButton({
+    required this.icon,
+    required this.selectedIcon,
+    required this.label,
+    required this.selected,
+    required this.onTap,
+  });
+
+  final IconData icon;
+  final IconData selectedIcon;
+  final String label;
+  final bool selected;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final scheme = theme.colorScheme;
+    final color = selected ? scheme.primary : scheme.onSurfaceVariant;
+
+    return InkWell(
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(12),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(selected ? selectedIcon : icon, color: color, size: 20),
+          Text(
+            label,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: theme.textTheme.labelSmall?.copyWith(
+              color: color,
+              height: 1.1,
+              fontSize: 10,
+              fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
+            ),
           ),
         ],
       ),