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,85 +13,167 @@ 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(
-      ),*/
-      body: Column(
             children: [
               Container(
                   height: 100,
+                  // APPBar height
                   color: Color(0xFFF5E3C3),
                   width: double.infinity,
                   padding: EdgeInsets.all(10.0),
-            child: Center(
+                  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: ListView.builder(
+                child: GridView.count(
-              padding: EdgeInsets.symmetric(vertical: 5), // 调整列表视图的 padding
+                  crossAxisCount: 2,
-              itemCount: _results.length, // 列表項目數量
+                  shrinkWrap: true,
-              itemBuilder: (context, index) {
+                  physics: NeverScrollableScrollPhysics(),
-                final user = _results[index];
+                  padding: EdgeInsets.all(16),
-                return ListTile(
+                  children: [
-                  title: Text(user['name']), // 顯示名稱
+                    _buildGridItem(Icons.monitor_outlined, '畫面1', context),
-                  subtitle: Text('gender: ${user['gender']}'), // 顯示性別
+                    _buildGridItem(Icons.monitor_outlined, '畫面2', context),
-                );
+                    /*_buildGridItem(Icons.monitor_outlined, '切換畫面', context),
-              },
+                    _buildGridItem(Icons.person_sharp, '個人資料', context),*/
+                  ],
                 ),
               ),
             ],
           ),
+        ),
+      ),
+      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)),
+            ],
+          ),
+        ),
+      ),
     );
   }
 }