use persistent_bottom_nav_bar_v2 replace native bottom_nav_bar

2024-09-02 17:14:35 +08:00
parent 920f74607b
commit 6ad91200c2
8 changed files with 239 additions and 312 deletions
--- a/lib/BottomNavBar.dart
+++ b/lib/BottomNavBar.dart
@@ -0,0 +1,89 @@
+import 'package:flutter/material.dart';
+import 'package:persistent_bottom_nav_bar_v2/persistent_bottom_nav_bar_v2.dart';
+
+// Import the pages
+import 'HomePage.dart';
+import 'HistoricalRecord.dart';
+import 'KnowledgePage.dart';
+import 'MessagePage.dart';
+import 'PersonalInfo.dart';
+
+class BottomNavBar extends StatelessWidget {
+  const BottomNavBar({
+    super.key,
+    required this.email,
+    required this.initTabIndex,
+  });
+
+  final String email;
+  final int initTabIndex;
+
+  List<PersistentTabConfig> _tabs(BuildContext context) => [
+        PersistentTabConfig.noScreen(
+          item: ItemConfig(
+            icon: Icon(Icons.home),
+            title: "首頁",
+            activeForegroundColor: Colors.orange,
+            inactiveForegroundColor: Colors.grey,
+          ),
+          onPressed: (context) {
+            Navigator.pop(context); // Now you can use context here
+          },
+        ),
+        PersistentTabConfig(
+          screen: HistoricalRecord(
+            email: email,
+          ),
+          item: ItemConfig(
+            icon: Icon(Icons.history_edu),
+            title: "跌倒紀錄",
+            activeForegroundColor: Colors.orange,
+            inactiveForegroundColor: Colors.grey,
+          ),
+        ),
+        PersistentTabConfig(
+          screen: KnowledgePage(
+            email: email,
+          ),
+          item: ItemConfig(
+            icon: Icon(Icons.lightbulb_outline),
+            title: "知識補充",
+            activeForegroundColor: Colors.orange,
+            inactiveForegroundColor: Colors.grey,
+          ),
+        ),
+        PersistentTabConfig(
+          screen: MessagePage(
+            email: email,
+          ),
+          item: ItemConfig(
+            icon: Icon(Icons.monitor_outlined),
+            title: "切換畫面",
+            activeForegroundColor: Colors.orange,
+            inactiveForegroundColor: Colors.grey,
+          ),
+        ),
+        PersistentTabConfig(
+          screen: PersonalInfo(
+            email: email,
+          ),
+          item: ItemConfig(
+            icon: Icon(Icons.person_sharp),
+            title: "個人資料",
+            activeForegroundColor: Colors.orange,
+            inactiveForegroundColor: Colors.grey,
+          ),
+        ),
+      ];
+
+  @override
+  Widget build(BuildContext context) {
+    return PersistentTabView(
+      tabs: _tabs(context), // Pass context here
+      navBarBuilder: (navBarConfig) => Style1BottomNavBar(
+        navBarConfig: navBarConfig,
+      ),
+      controller: PersistentTabController(initialIndex: initTabIndex),
+    );
+  }
+}