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

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

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

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

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

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: