From 6ad91200c2f2f36ee790a5a80822a443b4bc7314 Mon Sep 17 00:00:00 2001 From: JingChiang Date: Mon, 2 Sep 2024 17:14:35 +0800 Subject: [PATCH] use persistent_bottom_nav_bar_v2 replace native bottom_nav_bar --- lib/BottomNavBar.dart | 89 ++++++++++++++++++++++ lib/HistoricalRecord.dart | 86 ++++------------------ lib/HomePage.dart | 16 ++-- lib/KnowledgePage.dart | 138 ++++++++++++----------------------- lib/MessagePage.dart | 55 +++----------- lib/PersonalInfo.dart | 150 +++++++++++++------------------------- pubspec.lock | 16 ++++ pubspec.yaml | 1 + 8 files changed, 239 insertions(+), 312 deletions(-) create mode 100644 lib/BottomNavBar.dart diff --git a/lib/BottomNavBar.dart b/lib/BottomNavBar.dart new file mode 100644 index 0000000..4881227 --- /dev/null +++ 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 _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), + ); + } +} diff --git a/lib/HistoricalRecord.dart b/lib/HistoricalRecord.dart index 069f82c..8c41f84 100644 --- a/lib/HistoricalRecord.dart +++ b/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'; @@ -29,7 +30,7 @@ class _HistoricalRecordState extends State { final conn = await MySQLConnection.createConnection( //host: '203.64.84.154', - host:'10.0.2.2', + host: '10.0.2.2', //127.0.0.1 10.0.2.2 port: 3306, userName: 'root', @@ -48,15 +49,17 @@ class _HistoricalRecordState extends State { print('No data found in users table.'); } else { setState(() { - _results = result.rows.map((row) => { - 'id': row.colAt(0), - 'name': row.colAt(1), - 'age':row.colAt(2), - 'gender':row.colAt(3), - 'phone':row.colAt(4), - 'email':row.colAt(5), - 'password':row.colAt(2) - }).toList(); + _results = result.rows + .map((row) => { + 'id': row.colAt(0), + 'name': row.colAt(1), + 'age': row.colAt(2), + 'gender': row.colAt(3), + 'phone': row.colAt(4), + 'email': row.colAt(5), + 'password': row.colAt(2) + }) + .toList(); }); } } catch (e) { @@ -93,9 +96,9 @@ class _HistoricalRecordState extends State { title: Text(_results[index]['name']), subtitle: Text( 'age: ${_results[index]['age']}, ' - 'gender: ${_results[index]['gender']}, ' - 'phone: ${_results[index]['phone']}, ' - 'email: ${_results[index]['email']}', + 'gender: ${_results[index]['gender']}, ' + 'phone: ${_results[index]['phone']}, ' + 'email: ${_results[index]['email']}', ), ); }, @@ -103,63 +106,6 @@ class _HistoricalRecordState extends State { ), ], ), - 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, - )), - ); - } - }, - ), ); } } diff --git a/lib/HomePage.dart b/lib/HomePage.dart index 4199ccf..bfc5352 100644 --- a/lib/HomePage.dart +++ b/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; @@ -40,8 +42,8 @@ class _HomePageState extends State { child: Stack(children: [ Container( padding: EdgeInsets.only( - left: MediaQuery.of(context).size.width, - top: MediaQuery.of(context).size.height / 2, + left: MediaQuery.of(context).size.width, + top: MediaQuery.of(context).size.height / 2, ), child: Icon(Icons.settings, size: 48, color: Colors.orange), ), @@ -51,7 +53,6 @@ class _HomePageState extends State { style: TextStyle(fontSize: 24, height: 5), ), ), - ])), Container( color: Color(0xFFFFF0E0), @@ -132,16 +133,18 @@ class _HomePageState extends State { 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 { Navigator.push( context, MaterialPageRoute( - builder: (context) => PersonalInfo( + builder: (context) => BottomNavBar( email: widget.email, + initTabIndex: 4, )), ); } diff --git a/lib/KnowledgePage.dart b/lib/KnowledgePage.dart index bbc8640..08da142 100644 --- a/lib/KnowledgePage.dart +++ b/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(), @@ -36,104 +38,56 @@ class KnowledgePage extends StatelessWidget { ), ), Expanded( - child:ListView.builder( - padding: EdgeInsets.symmetric(vertical: 5), // 调整列表视图的 padding - itemCount: 3, - itemBuilder: (context, idx) { - return InkWell( - onTap: () { - Navigator.push( - context, - MaterialPageRoute(builder: (context) => HomePage( - email: email, - )), - ); - }, - child: Card( - //margin: EdgeInsets.all(10), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Image.asset( - 'lib/images/456.jpg', - height: 180, - width: double.infinity, - fit: BoxFit.cover, + child: ListView.builder( + padding: EdgeInsets.symmetric(vertical: 5), // 调整列表视图的 padding + itemCount: 3, + itemBuilder: (context, idx) { + return InkWell( + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => HomePage( + email: email, + )), + ); + }, + child: Card( + //margin: EdgeInsets.all(10), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Image.asset( + 'lib/images/456.jpg', + height: 180, + width: double.infinity, + fit: BoxFit.cover, + ), + Padding( + padding: EdgeInsets.all(10.0), + child: Text( + '文章標題 $idx', + style: TextStyle( + fontSize: 18, fontWeight: FontWeight.bold), ), - Padding( - padding: EdgeInsets.all(10.0), - child: Text( - '文章標題 $idx', - style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), - ), + ), + Padding( + padding: EdgeInsets.symmetric(horizontal: 10.0), + child: Text( + '這是文章的簡短描述...', + style: TextStyle(fontSize: 16), ), - Padding( - padding: EdgeInsets.symmetric(horizontal: 10.0), - child: Text( - '這是文章的簡短描述...', - style: TextStyle(fontSize: 16), - ), - ), - SizedBox(height: 10), - ], - ), + ), + SizedBox(height: 10), + ], ), - ); - }, - ), + ), + ); + }, + ), ), ], ), - 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, - )), - ); - } - }, - ), ); } } diff --git a/lib/MessagePage.dart b/lib/MessagePage.dart index bd20cd3..4f53d2b 100644 --- a/lib/MessagePage.dart +++ b/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 { print('No data found in users table.'); } else { setState(() { - _results = result.rows.map((row) => { - 'name': row.colAt(0), - 'gender': row.colAt(1), - }).toList(); + _results = result.rows + .map((row) => { + 'name': row.colAt(0), + 'gender': row.colAt(1), + }) + .toList(); }); } } catch (e) { @@ -71,7 +75,8 @@ class _MessagePageState extends State { 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 { ), ], ), - 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)), - ); - } - }, - ), ); } } diff --git a/lib/PersonalInfo.dart b/lib/PersonalInfo.dart index 1e415a6..d973254 100644 --- a/lib/PersonalInfo.dart +++ b/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'; @@ -21,22 +22,25 @@ class PersonalInfo extends StatefulWidget { } class _PersonalInfoState extends State { - String _name = '', _phone = '', _age = '',_gender = '',_email = ''; - bool _isEditing=false;//是否為編輯狀態 - final TextEditingController _emailController = TextEditingController();//email輸入text + String _name = '', _phone = '', _age = '', _gender = '', _email = ''; + bool _isEditing = false; //是否為編輯狀態 + 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( //host: '203.64.84.154', - host:'10.0.2.2', + host: '10.0.2.2', //127.0.0.1 10.0.2.2 port: 3306, userName: 'root', @@ -50,17 +54,19 @@ class _PersonalInfoState extends State { try { print('ok'); - var result = await conn.execute('SELECT name, phone, age, gender, email FROM users WHERE email = :email', - {'email': widget.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)??'';//如果沒有資料就是空直 - _phone = row.colAt(1)??''; - _age = row.colAt(2)??''; - _gender = row.colAt(3)??''; - _email = row.colAt(4)??''; + _name = row.colAt(0) ?? ''; //如果沒有資料就是空直 + _phone = row.colAt(1) ?? ''; + _age = row.colAt(2) ?? ''; + _gender = row.colAt(3) ?? ''; + _email = row.colAt(4) ?? ''; }); } } catch (e) { @@ -103,7 +109,6 @@ class _PersonalInfoState extends State { } } - //頁面 @override Widget build(BuildContext context) { @@ -116,7 +121,7 @@ class _PersonalInfoState extends State { children: [ Container( height: 100, - color: Color(0xFFF5E3C3),//背景底色 + color: Color(0xFFF5E3C3), //背景底色 width: double.infinity, padding: EdgeInsets.all(10.0), child: Center( @@ -132,10 +137,14 @@ class _PersonalInfoState extends State { 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,43 +152,37 @@ class _PersonalInfoState extends State { 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( title: Text('EMAIL'), subtitle: //Text(_email), - _isEditing - ? TextField( - controller: _emailController, - autofocus: true, - onChanged: (value) { - setState(() { - _email = value; - }); - }, - ) - : Text(_email), + _isEditing + ? TextField( + controller: _emailController, + autofocus: true, + onChanged: (value) { + setState(() { + _email = value; + }); + }, + ) + : Text(_email), //trailing: Icon(Icons.arrow_forward_ios), onTap: () { @@ -187,10 +190,12 @@ class _PersonalInfoState extends State { }, ), 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 { 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 { ], ), ), - ], ), - 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, - )), - ); - } - }, - ), ); } } diff --git a/pubspec.lock b/pubspec.lock index ed49eeb..3f8ecc9 100644 --- a/pubspec.lock +++ b/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: diff --git a/pubspec.yaml b/pubspec.yaml index b36dcee..a00dd68 100644 --- a/pubspec.yaml +++ b/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: