110316118/topicApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use persistent_bottom_nav_bar_v2 replace native bottom_nav_bar

Browse Source
This commit is contained in:
JingChiang
2024-09-02 17:14:35 +08:00
parent 920f74607b
commit 6ad91200c2
8 changed files with 239 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
lib/BottomNavBar.dart Normal file
View File

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

76
lib/HistoricalRecord.dart
View File

@@ -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<HistoricalRecord> {
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<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),
'gender':row.colAt(3),
'phone':row.colAt(4),
'email':row.colAt(5),
'password':row.colAt(2)
}).toList();
'age': row.colAt(2),
'gender': row.colAt(3),
'phone': row.colAt(4),
'email': row.colAt(5),
'password': row.colAt(2)
})
.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,
)),
);
}
},
),
);
}
}

12
lib/HomePage.dart
View File

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

60
lib/KnowledgePage.dart
View File

@@ -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,7 +38,7 @@ class KnowledgePage extends StatelessWidget {
),
),
Expanded(
child:ListView.builder(
child: ListView.builder(
padding: EdgeInsets.symmetric(vertical: 5), // 调整列表视图的 padding
itemCount: 3,
itemBuilder: (context, idx) {
@@ -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,
)),
);
}
},
),
);
}
}

51
lib/MessagePage.dart
View File

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

126
lib/PersonalInfo.dart
View File

@@ -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<PersonalInfo> {
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<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)??'';//如果沒有資料就是空直
_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<PersonalInfo> {
}
}
//頁面
@override
Widget build(BuildContext context) {
@@ -116,7 +121,7 @@ class _PersonalInfoState extends State<PersonalInfo> {
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<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,
)),
);
}
},
),
);
}
}

16
pubspec.lock
View File

@@ -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:

1
pubspec.yaml
View File

@@ -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: