homepage連結到messqgepage(切換畫面)
This commit is contained in:
@@ -146,10 +146,14 @@ class _HomePageState extends State<HomePage> {
|
||||
initTabIndex: 2,
|
||||
)),
|
||||
);
|
||||
} else if (label == '123') {
|
||||
} else if (label == '切換畫面') {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => TryPage()),
|
||||
MaterialPageRoute
|
||||
(builder: (context) => BottomNavBar(
|
||||
email: widget.email,
|
||||
initTabIndex: 3,
|
||||
)),
|
||||
);
|
||||
} else if (label == '個人資料') {
|
||||
Navigator.push(
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:mysql_client/mysql_client.dart';
|
||||
import 'package:webview_flutter/webview_flutter.dart';
|
||||
|
||||
import 'BottomNavBar.dart';
|
||||
class MessagePage extends StatefulWidget {
|
||||
final String email; // 接收來自上個頁面的 email
|
||||
|
||||
@@ -11,84 +13,166 @@ class MessagePage extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _MessagePageState extends State<MessagePage> {
|
||||
List<Map<String, dynamic>> _results = [];
|
||||
late WebViewController _webViewController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_fetchData(); // 連接資料庫並抓取資料
|
||||
}
|
||||
|
||||
void _fetchData() async {
|
||||
print('connect');
|
||||
|
||||
final conn = await MySQLConnection.createConnection(
|
||||
host: '203.64.84.154',
|
||||
port: 33061,
|
||||
userName: 'root',
|
||||
password: 'Topic@2024',
|
||||
databaseName: 'care',
|
||||
);
|
||||
await conn.connect();
|
||||
|
||||
try {
|
||||
var result = await conn.execute('SELECT eName, eGender FROM Elder');
|
||||
print('Result: ${result.length} rows found.');
|
||||
|
||||
if (result.rows.isEmpty) {
|
||||
print('No data found in users table.');
|
||||
} else {
|
||||
setState(() {
|
||||
_results = result.rows
|
||||
.map((row) => {
|
||||
'name': row.colAt(0),
|
||||
'gender': row.colAt(1),
|
||||
})
|
||||
.toList();
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
print('Error: $e');
|
||||
} finally {
|
||||
await conn.close();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
/*appBar: AppBar(
|
||||
title: Text('MySQL Data'), // 顯示標題
|
||||
backgroundColor: Color(0xFFF5E3C3),
|
||||
),*/
|
||||
body: Column(
|
||||
children: [
|
||||
Container(
|
||||
height: 100,
|
||||
color: Color(0xFFF5E3C3),
|
||||
width: double.infinity,
|
||||
padding: EdgeInsets.all(10.0),
|
||||
child: Center(
|
||||
child: Text(
|
||||
'切換畫面',
|
||||
style: TextStyle(fontSize: 24, height: 5),
|
||||
return PopScope(
|
||||
child: Scaffold(
|
||||
body: Center(
|
||||
child: Column(
|
||||
children: [
|
||||
Container(
|
||||
height: 100,
|
||||
// APPBar height
|
||||
color: Color(0xFFF5E3C3),
|
||||
width: double.infinity,
|
||||
padding: EdgeInsets.all(10.0),
|
||||
child: Stack(children: [
|
||||
Container(
|
||||
padding: EdgeInsets.only(
|
||||
left: MediaQuery.of(context).size.width,
|
||||
top: MediaQuery.of(context).size.height / 2,
|
||||
),
|
||||
child: Icon(Icons.settings, size: 48, color: Colors.orange),
|
||||
),
|
||||
Center(
|
||||
child: Text(
|
||||
'全方位照護守護者',
|
||||
style: TextStyle(fontSize: 24, height: 5),
|
||||
),
|
||||
),
|
||||
])),
|
||||
Container(
|
||||
color: Color(0xFFFFF0E0),
|
||||
margin: EdgeInsets.only(top: 5),
|
||||
padding: EdgeInsets.all(16),
|
||||
child: Column(
|
||||
children: [
|
||||
Container(
|
||||
height: 240,
|
||||
width: double.infinity,
|
||||
// TODO: 如果用http需要分別設定ios, android權限
|
||||
// TODO: 替換video_player to flutter_webView
|
||||
child: WebViewWidget(
|
||||
controller: WebViewController()
|
||||
..setJavaScriptMode(JavaScriptMode.unrestricted)
|
||||
..setNavigationDelegate(
|
||||
NavigationDelegate(
|
||||
onProgress: (int progress) {
|
||||
// Update loading bar.
|
||||
},
|
||||
onPageStarted: (String url) {},
|
||||
onPageFinished: (String url) {},
|
||||
onHttpError: (HttpResponseError error) {
|
||||
print("httpError");
|
||||
},
|
||||
onWebResourceError: (WebResourceError error) {
|
||||
print("httpResourceError");
|
||||
print(error.description);
|
||||
},
|
||||
onNavigationRequest: (NavigationRequest request) {
|
||||
if (request.url.startsWith(
|
||||
'http://203.64.84.154:8088/video_feed')) {
|
||||
return NavigationDecision.prevent;
|
||||
}
|
||||
return NavigationDecision.navigate;
|
||||
},
|
||||
),
|
||||
)
|
||||
..loadRequest(Uri.parse('http://203.64.84.154:8088')),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'即時畫面',
|
||||
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: GridView.count(
|
||||
crossAxisCount: 2,
|
||||
shrinkWrap: true,
|
||||
physics: NeverScrollableScrollPhysics(),
|
||||
padding: EdgeInsets.all(16),
|
||||
children: [
|
||||
_buildGridItem(Icons.monitor_outlined, '畫面1', context),
|
||||
_buildGridItem(Icons.monitor_outlined, '畫面2', context),
|
||||
/*_buildGridItem(Icons.monitor_outlined, '切換畫面', context),
|
||||
_buildGridItem(Icons.person_sharp, '個人資料', context),*/
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
padding: EdgeInsets.symmetric(vertical: 5), // 调整列表视图的 padding
|
||||
itemCount: _results.length, // 列表項目數量
|
||||
itemBuilder: (context, index) {
|
||||
final user = _results[index];
|
||||
return ListTile(
|
||||
title: Text(user['name']), // 顯示名稱
|
||||
subtitle: Text('gender: ${user['gender']}'), // 顯示性別
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
canPop: false,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildGridItem(IconData icon, String label, BuildContext context) {
|
||||
return Card(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
color: Colors.white,
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
/*if (label == '跌倒紀錄') {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => BottomNavBar(
|
||||
email: widget.email,
|
||||
initTabIndex: 1,
|
||||
)),
|
||||
);
|
||||
} else if (label == '知識補充') {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => BottomNavBar(
|
||||
email: widget.email,
|
||||
initTabIndex: 2,
|
||||
)),
|
||||
);
|
||||
} else if (label == '切換畫面') {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute
|
||||
(builder: (context) => BottomNavBar(
|
||||
email: widget.email,
|
||||
initTabIndex: 3,
|
||||
)),
|
||||
);
|
||||
} else if (label == '個人資料') {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => BottomNavBar(
|
||||
email: widget.email,
|
||||
initTabIndex: 4,
|
||||
)),
|
||||
);
|
||||
}*/
|
||||
},
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(icon, size: 48, color: Colors.orange),
|
||||
SizedBox(height: 8),
|
||||
Text(label, style: TextStyle(fontSize: 16)),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user