feat: 新增監視器畫面全螢幕

lib/MessagePage.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:mysql_client/mysql_client.dart';
+import 'package:persistent_bottom_nav_bar_v2/persistent_bottom_nav_bar_v2.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
 class MessagePage extends StatefulWidget {
@@ -13,6 +15,7 @@ class MessagePage extends StatefulWidget {
 
 class _MessagePageState extends State<MessagePage> {
   late WebViewController _webViewController;
+  late int _cameraId = 0;
 
   @override
   void initState() {
@@ -56,8 +59,9 @@ class _MessagePageState extends State<MessagePage> {
                   Container(
                     height: 240,
                     width: double.infinity,
-                      // TODO: 如果用http需要分別設定ios, android權限
+                    child: Stack(
-                      child: WebViewWidget(
+                      children: [
+                        WebViewWidget(
                           controller: _webViewController
                             ..setJavaScriptMode(JavaScriptMode.unrestricted)
                             ..setNavigationDelegate(
@@ -75,8 +79,7 @@ class _MessagePageState extends State<MessagePage> {
                                   print(error.description);
                                 },
                                 onNavigationRequest: (NavigationRequest request) {
-                                if (request.url.startsWith(
+                                  if (request.url.startsWith('http://203.64.84.154:8088/video_feed')) {
-                                    'http://203.64.84.154:8088/video_feed')) {
                                     return NavigationDecision.prevent;
                                   }
                                   return NavigationDecision.navigate;
@@ -85,6 +88,30 @@ class _MessagePageState extends State<MessagePage> {
                             )
                             ..loadRequest(Uri.parse('http://203.64.84.154:8088/0')),
                         ),
+                        Align(
+                          alignment: Alignment.bottomRight,
+                          child: Padding(
+                            padding: EdgeInsets.all(16.0),
+                            // Adjust padding as needed
+                            child: SizedBox(
+                              width: 45.0, // Set custom width
+                              height: 45.0, // Set custom height
+                              child: FloatingActionButton(
+                                onPressed: () {
+                                  // Handle zoom-in action
+                                  pushWithoutNavBar(
+                                      context,
+                                      MaterialPageRoute(
+                                        builder: (context) => WebViewPage(_cameraId),
+                                      ));
+                                },
+                                child: Icon(Icons.zoom_in),
+                              ),
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
                   ),
                   Text(
                     '即時畫面',
@@ -119,6 +146,7 @@ class _MessagePageState extends State<MessagePage> {
       color: Colors.white,
       child: InkWell(
         onTap: () {
+          _cameraId = camera_id;
           _webViewController.loadRequest(Uri.parse('http://203.64.84.154:8088/$camera_id'));
         },
         child: Center(
@@ -135,3 +163,92 @@ class _MessagePageState extends State<MessagePage> {
     );
   }
 }
+
+class WebViewPage extends StatefulWidget {
+  final int _cameraId;
+
+  WebViewPage(this._cameraId);
+
+  @override
+  _WebViewPageState createState() => _WebViewPageState();
+}
+
+class _WebViewPageState extends State<WebViewPage> {
+  late WebViewController _webViewController;
+
+  @override
+  void initState() {
+    super.initState();
+    SystemChrome.setPreferredOrientations([
+      DeviceOrientation.landscapeLeft,
+      DeviceOrientation.landscapeRight,
+    ]);
+    _webViewController = WebViewController();
+  }
+
+  @override
+  void dispose() {
+    SystemChrome.setPreferredOrientations([
+      DeviceOrientation.portraitUp,
+      DeviceOrientation.portraitDown,
+    ]);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        body: Stack(
+      children: [
+        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/${widget._cameraId}')),
+        ),
+        Align(
+          alignment: Alignment.bottomRight,
+          child: Padding(
+            padding: EdgeInsets.all(16.0),
+            child: SizedBox(
+              width: 45.0,
+              height: 45.0,
+              child: FloatingActionButton(
+                backgroundColor: Color(0xFFF5E3C3),
+                onPressed: () {
+                  SystemChrome.setPreferredOrientations([
+                    DeviceOrientation.portraitUp,
+                    DeviceOrientation.portraitDown,
+                  ]);
+                  Navigator.pop(context);
+                },
+                child: Icon(Icons.arrow_back_ios),
+              ),
+            ),
+          ),
+        )
+      ],
+    ));
+  }
+}