homepage連結到messqgepage(切換畫面)

lib/HomePage.dart

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

lib/MessagePage.dart

@@ -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(
+    return PopScope(
-      /*appBar: AppBar(
+      child: Scaffold(
-        title: Text('MySQL Data'), // 顯示標題
+        body: Center(
-        backgroundColor: Color(0xFFF5E3C3),
+          child: Column(
-      ),*/
+            children: [
-      body: Column(
+              Container(
-        children: [
+                  height: 100,
-          Container(
+                  // APPBar height
-            height: 100,
+                  color: Color(0xFFF5E3C3),
-            color: Color(0xFFF5E3C3),
+                  width: double.infinity,
-            width: double.infinity,
+                  padding: EdgeInsets.all(10.0),
-            padding: EdgeInsets.all(10.0),
+                  child: Stack(children: [
-            child: Center(
+                    Container(
-              child: Text(
+                      padding: EdgeInsets.only(
-                '切換畫面',
+                        left: MediaQuery.of(context).size.width,
-                style: TextStyle(fontSize: 24, height: 5),
+                        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
+      canPop: false,
-              itemCount: _results.length, // 列表項目數量
+    );
-              itemBuilder: (context, index) {
+  }
-                final user = _results[index];
+
-                return ListTile(
+  Widget _buildGridItem(IconData icon, String label, BuildContext context) {
-                  title: Text(user['name']), // 顯示名稱
+    return Card(
-                  subtitle: Text('gender: ${user['gender']}'), // 顯示性別
+      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)),
+            ],
           ),
-        ],
+        ),
       ),
     );
   }