use persistent_bottom_nav_bar_v2 replace native bottom_nav_bar

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),
+    );
+  }
+}

lib/HistoricalRecord.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
+import 'package:topic/BottomNavBar.dart';
 import 'package:topic/main.dart';
 import 'package:topic/HomePage.dart';
 import 'package:topic/PersonalInfo.dart';
@@ -48,7 +49,8 @@ class _HistoricalRecordState extends State<HistoricalRecord> {
         print('No data found in users table.');
       } else {
         setState(() {
-          _results = result.rows.map((row) => {
+          _results = result.rows
+              .map((row) => {
                     'id': row.colAt(0),
                     'name': row.colAt(1),
                     'age': row.colAt(2),
@@ -56,7 +58,8 @@ class _HistoricalRecordState extends State<HistoricalRecord> {
                     'phone': row.colAt(4),
                     'email': row.colAt(5),
                     'password': row.colAt(2)
-          }).toList();
+                  })
+              .toList();
         });
       }
     } catch (e) {
@@ -103,63 +106,6 @@ class _HistoricalRecordState extends State<HistoricalRecord> {
           ),
         ],
       ),
-      bottomNavigationBar: BottomNavigationBar(
-        items: [
-          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首頁'),
-          BottomNavigationBarItem(icon: Icon(Icons.history_edu), label: '跌倒紀錄'),
-          BottomNavigationBarItem(icon: Icon(Icons.lightbulb_outline), label: '知識補充'),
-          BottomNavigationBarItem(icon: Icon(Icons.monitor_outlined), label: '切換畫面'),
-          BottomNavigationBarItem(icon: Icon(Icons.person_sharp), label: '個人資料'),
-        ],
-        currentIndex: 1,
-        selectedItemColor: Colors.orange,
-        unselectedItemColor: Colors.grey,
-        selectedLabelStyle: TextStyle(color: Colors.orange),
-        unselectedLabelStyle: TextStyle(color: Colors.grey),
-        onTap: (index) {
-          if (index == 0) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(
-                  builder: (context) => HomePage(
-                    email: widget.email,
-                  )),
-            );
-          } else if (index == 1) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(
-                  builder: (context) => HistoricalRecord(
-                    email: widget.email,
-                  )),
-            );
-          } else if (index == 2) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(
-                  builder: (context) => KnowledgePage(
-                    email: widget.email,
-                  )),
-            );
-          } else if (index == 3) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(
-                  builder: (context) => MessagePage(
-                    email: widget.email,
-                  )),
-            );
-          } else if (index == 4) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(
-                  builder: (context) => PersonalInfo(
-                    email: widget.email,
-                  )),
-            );
-          }
-        },
-      ),
     );
   }
 }

lib/HomePage.dart

@@ -8,6 +8,8 @@ import 'package:topic/MessagePage.dart';
 import 'package:topic/TryPage.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
+import 'BottomNavBar.dart';
+
 class HomePage extends StatefulWidget {
   final String email;
 
@@ -51,7 +53,6 @@ class _HomePageState extends State<HomePage> {
                       style: TextStyle(fontSize: 24, height: 5),
                     ),
                   ),
-
                 ])),
             Container(
               color: Color(0xFFFFF0E0),
@@ -132,16 +133,18 @@ class _HomePageState extends State<HomePage> {
             Navigator.push(
               context,
               MaterialPageRoute(
-                  builder: (context) => HistoricalRecord(
+                  builder: (context) => BottomNavBar(
                         email: widget.email,
+                        initTabIndex: 1,
                       )),
             );
           } else if (label == '知識補充') {
             Navigator.push(
               context,
               MaterialPageRoute(
-                  builder: (context) => KnowledgePage(
+                  builder: (context) => BottomNavBar(
                         email: widget.email,
+                        initTabIndex: 2,
                       )),
             );
           } else if (label == '123') {
@@ -153,8 +156,9 @@ class _HomePageState extends State<HomePage> {
             Navigator.push(
               context,
               MaterialPageRoute(
-                  builder: (context) => PersonalInfo(
+                  builder: (context) => BottomNavBar(
                         email: widget.email,
+                        initTabIndex: 4,
                       )),
             );
           }

lib/KnowledgePage.dart

@@ -5,6 +5,8 @@ import 'package:topic/HomePage.dart';
 import 'package:topic/HistoricalRecord.dart';
 import 'package:topic/PersonalInfo.dart';
 import 'package:topic/MessagePage.dart';
+
+import 'BottomNavBar.dart';
 /*void main() {
   runApp(MaterialApp(
     home: KnowledgePage(),
@@ -44,7 +46,8 @@ class KnowledgePage extends StatelessWidget {
                   onTap: () {
                     Navigator.push(
                       context,
-                        MaterialPageRoute(builder: (context) => HomePage(
+                      MaterialPageRoute(
+                          builder: (context) => HomePage(
                                 email: email,
                               )),
                     );
@@ -64,7 +67,8 @@ class KnowledgePage extends StatelessWidget {
                           padding: EdgeInsets.all(10.0),
                           child: Text(
                             '文章標題 $idx',
-                              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+                            style: TextStyle(
+                                fontSize: 18, fontWeight: FontWeight.bold),
                           ),
                         ),
                         Padding(
@@ -84,56 +88,6 @@ class KnowledgePage extends StatelessWidget {
           ),
         ],
       ),
-      bottomNavigationBar: BottomNavigationBar(
-        items: [
-          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首頁'),
-          BottomNavigationBarItem(icon: Icon(Icons.history_edu), label: '跌倒紀錄'),
-          BottomNavigationBarItem(icon: Icon(Icons.lightbulb_outline), label: '知識補充'),
-          BottomNavigationBarItem(icon: Icon(Icons.monitor_outlined), label: '切換畫面'),
-          BottomNavigationBarItem(icon: Icon(Icons.person_sharp), label: '個人資料'),
-        ],
-        currentIndex: 2,
-        selectedItemColor: Colors.orange,
-        unselectedItemColor: Colors.grey,
-        onTap: (index) {
-          if (index == 0) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(builder: (context) => HomePage(
-                email: email,
-              )),
-            );
-          } else if (index == 1) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(builder: (context) => HistoricalRecord(
-                email: email,
-              )),
-            );
-          } else if (index == 2) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(builder: (context) => KnowledgePage(
-                email: email,
-              )),
-            );
-          } else if (index == 3) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(builder: (context) => MessagePage(
-                email: email,
-              )),
-            );
-          } else if (index == 4) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(builder: (context) => PersonalInfo(
-                email: email,
-              )),
-            );
-          }
-        },
-      ),
     );
   }
 }

lib/MessagePage.dart

@@ -5,6 +5,8 @@ import 'package:topic/PersonalInfo.dart';
 import 'package:topic/KnowledgePage.dart';
 import 'package:mysql_client/mysql_client.dart';
 
+import 'BottomNavBar.dart';
+
 class MessagePage extends StatefulWidget {
   final String email; // 接收來自上個頁面的 email
 
@@ -43,10 +45,12 @@ class _MessagePageState extends State<MessagePage> {
         print('No data found in users table.');
       } else {
         setState(() {
-          _results = result.rows.map((row) => {
+          _results = result.rows
+              .map((row) => {
                     'name': row.colAt(0),
                     'gender': row.colAt(1),
-          }).toList();
+                  })
+              .toList();
         });
       }
     } catch (e) {
@@ -71,7 +75,8 @@ class _MessagePageState extends State<MessagePage> {
             width: double.infinity,
             padding: EdgeInsets.all(10.0),
             child: Center(
-              child: Text('切換畫面',
+              child: Text(
+                '切換畫面',
                 style: TextStyle(fontSize: 24, height: 5),
               ),
             ),
@@ -91,46 +96,6 @@ class _MessagePageState extends State<MessagePage> {
           ),
         ],
       ),
-      bottomNavigationBar: BottomNavigationBar(
-        items: [
-          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首頁'),
-          BottomNavigationBarItem(icon: Icon(Icons.history_edu), label: '跌倒紀錄'),
-          BottomNavigationBarItem(icon: Icon(Icons.lightbulb_outline), label: '知識補充'),
-          BottomNavigationBarItem(icon: Icon(Icons.monitor_outlined), label: '切換畫面'),
-          BottomNavigationBarItem(icon: Icon(Icons.person_sharp), label: '個人資料'),
-        ],
-        currentIndex: 3, // 當前選中的索引
-        selectedItemColor: Colors.orange,
-        unselectedItemColor: Colors.grey,
-        onTap: (index) {
-          if (index == 0) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(builder: (context) => HomePage(email: widget.email)),
-            );
-          } else if (index == 1) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(builder: (context) => HistoricalRecord(email: widget.email)),
-            );
-          } else if (index == 2) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(builder: (context) => KnowledgePage(email: widget.email)),
-            );
-          } else if (index == 3) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(builder: (context) => MessagePage(email: widget.email)),
-            );
-          } else if (index == 4) {
-            Navigator.push(
-              context,
-              MaterialPageRoute(builder: (context) => PersonalInfo(email: widget.email)),
-            );
-          }
-        },
-      ),
     );
   }
 }

lib/PersonalInfo.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
+import 'package:topic/BottomNavBar.dart';
 import 'package:topic/main.dart';
 import 'package:topic/HomePage.dart';
 import 'package:topic/HistoricalRecord.dart';
@@ -23,15 +24,18 @@ class PersonalInfo extends StatefulWidget {
 class _PersonalInfoState extends State<PersonalInfo> {
   String _name = '', _phone = '', _age = '', _gender = '', _email = '';
   bool _isEditing = false; //是否為編輯狀態
-  final TextEditingController _emailController = TextEditingController();//email輸入text
+  final TextEditingController _emailController =
+      TextEditingController(); //email輸入text
 
   @override
-  void initState() {//初始化
+  void initState() {
+    //初始化
     super.initState();
     _fetchData();
   }
 
-  void _fetchData() async {//MYSQL
+  void _fetchData() async {
+    //MYSQL
     print('傳遞過來的 email: ${widget.email}'); // 打印 email 來確認它是否正確傳遞
 
     final conn = await MySQLConnection.createConnection(
@@ -50,10 +54,12 @@ class _PersonalInfoState extends State<PersonalInfo> {
 
     try {
       print('ok');
-      var result = await conn.execute('SELECT name, phone, age, gender, email FROM users WHERE email = :email',
+      var result = await conn.execute(
+        'SELECT name, phone, age, gender, email FROM users WHERE email = :email',
         {'email': widget.email}, // 傳入參數 email
       );
-      if (result.rows.isNotEmpty) {//有資料
+      if (result.rows.isNotEmpty) {
+        //有資料
         var row = result.rows.first;
         setState(() {
           _name = row.colAt(0) ?? ''; //如果沒有資料就是空直
@@ -103,7 +109,6 @@ class _PersonalInfoState extends State<PersonalInfo> {
     }
   }
 
-
   //頁面
   @override
   Widget build(BuildContext context) {
@@ -132,10 +137,14 @@ class _PersonalInfoState extends State<PersonalInfo> {
 
               children: [
                 ListTile(
-                  title: Text('姓名',style: TextStyle(fontSize: 20),),
+                  title: Text(
+                    '姓名',
+                    style: TextStyle(fontSize: 20),
+                  ),
                   subtitle: Text(_name),
                   //trailing: Icon(Icons.arrow_forward_ios),//>
-                  onTap: () {//點了之後
+                  onTap: () {
+                    //點了之後
                   },
                 ),
                 Divider(),
@@ -143,27 +152,21 @@ class _PersonalInfoState extends State<PersonalInfo> {
                   title: Text('手機'),
                   subtitle: Text(_phone),
                   //trailing: Icon(Icons.arrow_forward_ios),
-                  onTap: () {
+                  onTap: () {},
-
-                  },
                 ),
                 Divider(),
                 ListTile(
                   title: Text('生日'),
                   subtitle: Text(_age),
                   //trailing: Icon(Icons.arrow_forward_ios),
-                  onTap: () {
+                  onTap: () {},
-
-                  },
                 ),
                 Divider(),
                 ListTile(
                   title: Text('性別'),
                   subtitle: Text(_gender),
                   //trailing: Icon(Icons.arrow_forward_ios),
-                  onTap: () {
+                  onTap: () {},
-
-                  },
                 ),
                 Divider(),
                 ListTile(
@@ -187,10 +190,12 @@ class _PersonalInfoState extends State<PersonalInfo> {
                   },
                 ),
                 Divider(),
-                SizedBox(height: 20,width: 60,),
+                SizedBox(
+                  height: 20,
+                  width: 60,
+                ),
                 ElevatedButton(
-                  onPressed: () {
+                  onPressed: () {},
-                  },
                   child: Text('修改資料'),
                   style: TextButton.styleFrom(
                     backgroundColor: Color(0xFFF5E3C3), // 無背景颜色
@@ -198,10 +203,12 @@ class _PersonalInfoState extends State<PersonalInfo> {
                     shadowColor: Colors.transparent, // 去除陰影
                   ),
                 ),
-                SizedBox(height: 10,width: 60,),
+                SizedBox(
+                  height: 10,
+                  width: 60,
+                ),
                 ElevatedButton(
-                  onPressed: () {
+                  onPressed: () {},
-                  },
                   child: Text('登出'),
                   style: TextButton.styleFrom(
                     backgroundColor: Color(0xFFF5E3C3),
@@ -212,63 +219,8 @@ class _PersonalInfoState extends State<PersonalInfo> {
               ],
             ),
           ),
-
         ],
       ),
-      bottomNavigationBar: BottomNavigationBar(
-        items: [
-          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首頁'),
-          BottomNavigationBarItem(icon: Icon(Icons.history_edu), label: '跌倒紀錄'),
-          BottomNavigationBarItem(icon: Icon(Icons.lightbulb_outline), label: '知識補充'),
-          BottomNavigationBarItem(icon: Icon(Icons.monitor_outlined), label: '切換畫面'),
-          BottomNavigationBarItem(icon: Icon(Icons.person_sharp), label: '個人資料'),
-        ],
-        currentIndex: 4,
-        selectedItemColor: Colors.orange,
-        unselectedItemColor: Colors.grey,
-          onTap: (index) {
-            if (index == 0) {
-              Navigator.push(
-                context,
-                MaterialPageRoute(builder: (context) => HomePage(
-                  email: _email,
-                )),
-              );
-            }
-            else if (index == 1) {
-              Navigator.push(
-                context,
-                MaterialPageRoute(builder: (context) => HistoricalRecord(
-                  email: widget.email,
-                )),
-              );
-            }
-            else if (index == 2) {
-              Navigator.push(
-                context,
-                MaterialPageRoute(builder: (context) => KnowledgePage(
-                  email: widget.email,
-                )),
-              );
-            }
-            else if (index == 3) {
-              Navigator.push(
-                context,
-                MaterialPageRoute(builder: (context) => MessagePage(
-                  email: widget.email,
-                )),
-              );
-            }
-            else if (index == 4) {
-              Navigator.push(
-                context,
-                MaterialPageRoute(builder: (context) => PersonalInfo(
-                  email: widget.email,
-                )),
-              );
-            }
-          },
-      ),
     );
   }
 }

pubspec.lock

@@ -104,6 +104,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  go_router:
+    dependency: transitive
+    description:
+      name: go_router
+      sha256: "2ddb88e9ad56ae15ee144ed10e33886777eb5ca2509a914850a5faa7b52ff459"
+      url: "https://pub.dev"
+    source: hosted
+    version: "14.2.7"
   html:
     dependency: transitive
     description:
@@ -232,6 +240,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.9.0"
+  persistent_bottom_nav_bar_v2:
+    dependency: "direct main"
+    description:
+      name: persistent_bottom_nav_bar_v2
+      sha256: f5cc01ed36d6f93ecb3b8b64eaaa5b41618c6ac75c54e8beb1d3486cfc6d8547
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.3.0"
   plugin_platform_interface:
     dependency: transitive
     description:

pubspec.yaml

@@ -40,6 +40,7 @@ dependencies:
   video_player: ^2.9.1
   http: ^1.2.2
   webview_flutter: ^4.8.0
+  persistent_bottom_nav_bar_v2: ^5.3.0
 
 dev_dependencies:
   flutter_test: