เปิดเว็บไซต์ภายในแอปด้วย InappWebview ใน Flutter

  url_launcher: ^6.3.0
  flutter_inappwebview: ^6.1.3

import 'dart:collection';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:url_launcher/url_launcher.dart';

class InappWeb extends StatefulWidget {
  static const routeName = '/inappweb';

  const InappWeb({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _InappWebState();
  }
}

class _InappWebState extends State<InappWeb> {
  // กำหนด key สำหรับ InAppWebView กรณีต้องการไม่ให้ซ้ำหรืออ้างอิง
  final GlobalKey webViewKey = GlobalKey();

  // ตัวควบคุม webview
  InAppWebViewController? webViewController;
  // กำหนดการต้้งค่าเริ่มต้นต่างๆ 
  InAppWebViewSettings settings = InAppWebViewSettings(
      isInspectable: kDebugMode, // รองรับการตรวจสอบ (inspect) ค่า true หรือ false
      mediaPlaybackRequiresUserGesture: false, // ผู้ใช้ต้องกดเพื่อเล่น หรือเล่นอัตโนมัติ
      allowsInlineMediaPlayback: true, //  ให้เล่นมีเดียแบบ inline
      iframeAllow: "camera; microphone", //  iframe สามารถขอเข้าถึงกล้องและไมโครโฟน
      iframeAllowFullscreen: true // ให้ iframe แสดงผลแบบเต็มหน้าจอ
  );

  // ส่วนสำหรับควบคุมการปัดลงเพื่อรีเฟรช หรือ Pull to refresh
  PullToRefreshController? pullToRefreshController;

  // กำกนดตัวเก็บค่าสถานะการโหลดข้อมูล
  final ValueNotifier<double> _progressNotifier = ValueNotifier<double>(0);

  // กำหนดค่าเริ่มต้นเป็น false สถานะการเลื่อนในเมนู ว่าไปหน้าเพจก่อนหน้า ไปหน้าถัดไป
  final ValueNotifier<bool> _canGoBack = ValueNotifier<bool>(false);
  final ValueNotifier<bool> _canGoForward = ValueNotifier<bool>(false);

  // ส่วนสำหรับกำหนดเมนูคลิกขวา หรือ การกดค้างแล้วแสดงเมนู
  late ContextMenu contextMenu;
  String url = ""; // สำหรับเก็บ url
  double progress = 0; // สถานะการโหลด
  // สำหรับเก็บค่า ข้อความ อาจจะใช้เก็บ url ได้
  final urlController = TextEditingController();

  @override
  void initState() {
    super.initState();

    // ตั้งค่าเิริ่มต้นเมื่อใช้งาน สำหรับการสร้างปุมเมนู กำหนดเอง
    // ในที่นี้เพิมแค่เมนูเดียวเป็นตัวอย่าง ชื่อว่าเมนู Special
    contextMenu = ContextMenu(
        menuItems: [
          ContextMenuItem(
              id: 1,
              title: "Special",
              action: () async {
                // กำหนด คำสั่งตามต้องการ ถ้าเลือกเมนูนี้
                // ในตัวอย่าง แสดงข้อความที่เลือก ถ้ามี จากนั้นให้ปล่อยการโฟกัส
                print("xdebug: Menu item Special clicked!");
                print("xdebug: ${await webViewController?.getSelectedText()}");
                await webViewController?.clearFocus();
              })
        ],
        // ซ่อนเมนูของรบบหรือไม่ ถ้า true จะไม่แสดงเมนูอื่นๆ เช่น เมนูคัดลอก จะแสดงแค่เมนูที่เราสร้างขึ้น
        settings: ContextMenuSettings(hideDefaultSystemContextMenuItems: true),
        // คำสั่งเมื่อกดค้าง เพื่อแสดงเมนู ทำงานทันทีที่เรียกใช้
        onCreateContextMenu: (hitTestResult) async {
          print("xdebug: onCreateContextMenu");
          print("xdebug: ${hitTestResult.extra}");
          print("xdebug: ${await webViewController?.getSelectedText()}");
        },
        // เมื่อยกเลิกการเลือก หรือเมนูที่ขึ้นแสดง ซ่อนไป
        onHideContextMenu: () {
          print("xdebug: onHideContextMenu");
        },
        // เมื่อคลิกที่เมนู ที่แสดงขื้นมา
        onContextMenuActionItemClicked: (contextMenuItemClicked) async {
          var id = contextMenuItemClicked.id;
          print("xdebug: onContextMenuActionItemClicked: " +
              id.toString() +
              " " +
              contextMenuItemClicked.title);
        });

        // ส่วนของการตั้งค่าการกดปัดลงเพื่อรีเฟรช
        // ตรวจสอบให้ทำงานถ้าเป็น platform ที่รองรับ
        pullToRefreshController = kIsWeb ||
            ![TargetPlatform.iOS, TargetPlatform.android]
                .contains(defaultTargetPlatform)
        ? null // ถ้าไม่รองรับ ไม่ต้องแสดงอะไร
        : PullToRefreshController( // ถ้ารองรับก็ใช้งาน PullToRefreshController widget
            settings: PullToRefreshSettings(
              color: Colors.blue,
            ),
            onRefresh: () async {
              if (defaultTargetPlatform == TargetPlatform.android) {
                webViewController?.reload();
              } else if (defaultTargetPlatform == TargetPlatform.iOS) {
                webViewController?.loadUrl(
                    urlRequest:
                        URLRequest(url: await webViewController?.getUrl()));
              }
            },
        );
  }

  // ฟังก์ชั่นสำหรับเรียกใช้งานการแทรก CSS และ JavaScript
  void _injectCSSAndJavaScript() async {
    print("xdebug: inject css run");
    if (webViewController != null) {
      print("xdebug: inject css run and controller work");

      // ข้อความ css code
      String css = """
        .header-layout-side.morenews-header,
        #secondary,
        .af-breadcrumbs,
        footer.site-footer {
          display:none;
        }
      """;

      // ข้อความ javascript code
      String script = """
        var style = document.createElement('style');
        style.type = 'text/css';
        style.appendChild(document.createTextNode(`$css`));
        document.head.appendChild(style);
      """;

      // ตัวอย่างการแทรก JavaScript (Inject JavaScript)
      await webViewController!.evaluateJavascript(source: script);

      // ตัวอย่างถ้าต้องการแทรก css (Inject CSS)
/*       await webViewController!.injectCSSCode(source: """
.header-layout-side.morenews-header,
#secondary,
.af-breadcrumbs,
footer.site-footer {
  display:none;
}
      """); */
    }
  }

  // การยกเลิกและล้างค่าต่างๆ เมื่อได้ใช้งาน เพื่อคืนหน่วยความจำ
  @override
  void dispose() {
    //pullToRefreshController!.dispose();
    _progressNotifier.dispose();
    urlController.dispose();
    _canGoBack.dispose();
    _canGoForward.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // รับค่า url ที่ส่งมาใน arguments
    // const url = ModalRoute.of(context)!.settings.arguments as String;
    // กำหนด url เริมต้น
    const url = "https://www.ninenik.com";
    // เก็บ url ไว้จัดการ ถ้าต้องการควบคุมผ่าน  TextEditingController 
    urlController.text = url;

    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color.fromRGBO(64, 64, 64, 1),
          foregroundColor: Colors.white,
          title: Text(
            'Tiktok',
            style: TextStyle(color: Colors.white),
          ),
          actions: <Widget>[
            // ส่วนของเมนูควบคุมการท่องเว็บ สร้างมาจาก อีก คลาส 
            // เพื่อจะได้จัดการง่าย ส่งคาที่จำเป็นไปตามรูปแบบที่กำหนด
            NavigationControls(
              controller: webViewController,
              canGoBack: _canGoBack,
              canGoForward: _canGoForward,
              initialUrl: url,
            ),
          ],
        ),
        body: SafeArea( // ใช้ให้แสดงเฉพาะส่วนที่ไม่เกี่ยวกับแถบสถานะแบตด้านบน
            child: Column(children: <Widget>[
          Expanded(
            child: Stack( // จัดเรียงแบบซ้อนทับด้วย Stack
              children: [
                // ส่วนของการแสดง webview อยู่ล่างสุด
                InAppWebView(
                  key: webViewKey,
                  initialUrlRequest: URLRequest(url: WebUri(url)), // เรียก url เริ่มต้น
                  // ส่วนเรียกให้ทำงานก่อน เมื่อมีการ render เฟรมแรก
                  onPageCommitVisible: (controller, url) async {
                    // ในที่นี้เราเอาไว้แทรก css และ javascript 
                    _injectCSSAndJavaScript();
                  },
                  // การแทรกสริปเมื่อเริ่มค้น โดยไว้กำหนด script ที่ไม่ให้แก้ไขได้ ในที่นี้เป้นค่าว่าง
                  initialUserScripts: UnmodifiableListView<UserScript>([]),
                  initialSettings: settings, // ใช้การตั้งค่าที่กำหนดด้านบน
                  contextMenu: contextMenu, // ส่วนแสดงเมนูคลิกขวา หรือกดค้าง
                  pullToRefreshController: pullToRefreshController, // pull to refresh
                  onWebViewCreated: (controller) async {
                    // เมื่อเริ่มการสร้าง webview กำหนดค่า controller ไว้ใช้งาน
                    webViewController = controller;
                  },
                  onLoadStart: (controller, url) async { // เมื่อเริ่มโหลดหน้าเว็บ
                    _progressNotifier.value = 0; // สถานะการโหลด
                    setState(() {
                      // กำหนดค่าเริมต้นต่างๆ 
                      this.url = url.toString();
                      urlController.text = this.url;
                    });
                  },
                  // เมื่อเว็บไซต์นั้นๆ  ร้องขอสิทธิ์การเข้าถึงส่วนต่างๆ
                  onPermissionRequest: (controller, request) async {
                    return PermissionResponse(
                        resources: request.resources,
                        action: PermissionResponseAction.GRANT);
                  },
                  // การทำงานเมื่อมีการกดลิ้งค์ในเว็บไซต์
                  shouldOverrideUrlLoading:
                      (controller, navigationAction) async {
                        // ตรวจสอบค่าจาก url
                    var uri = navigationAction.request.url!;

                    // ถ้าไม่ใช่ค่าตามที่ระบบไว้ ให้เรียกใช้ฟังก์ชั่นการเปิดจาก url_launcher
                    if (![
                      "http",
                      "https",
                      "file",
                      "chrome",
                      "data",
                      "javascript",
                      "about"
                    ].contains(uri.scheme)) {
                       // เปลี่ยนลิ้งค์ เป็น url ที่สามารถเข้าได้ เช่น intent:// เปลี่ยนเป็น https:// 
                      String newUrl = '';
                      newUrl  = uri.toString().replaceFirst('${uri.scheme}://', 'https://'); // แปลงเป็น https URL
                      print("xdebug: not in allow ${newUrl}");
                      WebUri newUri = WebUri(newUrl);
                      if (await canLaunchUrl(newUri)) {
                        // เปิดจากแอป หรือส่วนอื่นที่ผ่านหน้าเว็บ
                        await launchUrl(
                          newUri,
                        );
                        // ถ้าไม่สามาถเปิดผ่านส่วนจัดการใดๆ ได้
                        return NavigationActionPolicy.CANCEL;
                      }
                    }
                    // กรณีเป็น url ตามลิสรายการที่กำหนด ให้อนุญาตเข้าใช้งานได้
                    return NavigationActionPolicy.ALLOW;
                  },
                  // เมื่อโหลดหน้าเพจเสร็จ
                  onLoadStop: (controller, url) async {
                    // หยุดการทำงานส่วนควบคุม pull to refresh
                    pullToRefreshController?.endRefreshing();
                    // เก็บค่าสถานะการลิ้งค์ไปหน้าต่างๆ ว่าทำได้หรือม่
                    _canGoBack.value =
                        await webViewController?.canGoBack() ?? false;
                    _canGoForward.value =
                        await webViewController?.canGoForward() ?? false;
                    setState(() {
                      this.url = url.toString();
                      urlController.text = this.url;
                    });
                  },
                  // กรณีการโหลดเกิด error 
                  onReceivedError: (controller, request, error) {
                    pullToRefreshController?.endRefreshing();
                  },
                  // การดำเนินการระหว่างกำลังโหลดหน้าเพจ
                  onProgressChanged: (controller, progress) {
                    // เมื่อโหลดเสร็จ 100 %
                    if (progress == 100) {
                      pullToRefreshController?.endRefreshing();
                    }
                    // ในระหว่างการโหลด เก็บค่า percent ไว้แสดง
                    _progressNotifier.value = progress / 100;
                    setState(() {
                      this.progress = progress / 100;
                      urlController.text = this.url;
                    });
                  },
                  // เมื่อมีการรีโหลดหน้านั้นๆ
                  onUpdateVisitedHistory: (controller, url, isReload) {
                    setState(() {
                      this.url = url.toString();
                      urlController.text = this.url;
                    });
                  },
                  // เมื่อมีการแสดงข้อความจาก console.log
                  onConsoleMessage: (controller, consoleMessage) {
                    print(consoleMessage);
                  },
                ),
                // ส่วนของการแสดงสถานะขณะกำลังโหลด
                // ส่วนนี้จะซ้อนอยู่ด้านบนก่อนที่เว็บจะโหลดเสร็จก็จะหายไป
                ValueListenableBuilder<double>(
                  valueListenable: _progressNotifier,
                  builder: (context, progress, child) {
                    if (progress == 1.0) {
                      return SizedBox
                          .shrink(); // ไม่แสดงอะไรเมื่อโหลดเสร็จ
                    } else {
                      // ขณะกำลังโหลด เราสามารถสร้างตัวคลุมไม่ให้เห็นส่วนของเว็บกำลังโหลดได้
                      // อย่างในที่นี้ เราสร้างตัวคลุมพื้นหลังสีขาว กั้นไว้ ให้ css หรือ javascript ทำงาน
                      // ถ้าอยากให้เห็นหน้าเพจกำลังโหลด สามารถกำหนดสีพ้ืนหลังเป็น Colors.transparent
                      return Container(
                        width: double.infinity, // Full width
                        height: double.infinity, // Full height
                        color: Colors.white, // White background
                        child: Center(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              CircularProgressIndicator(
                                color: Color.fromRGBO(64, 64, 64, 1),
                                value: progress,
                              ),
                              SizedBox(height: 10),
                              Text('${(progress * 100).round()}%'),
                            ],
                          ),
                        ),
                      );
                    }
                  },
                )
              ],
            ),
          ),
        ])));
  }
}

// สร้าง widget สำหรับทำปุ่มควบคุม เช่น ก่อนหน้า ย้อนหลัง รีเฟรช
class NavigationControls extends StatelessWidget {
  // กำหนด class constructor รับค่าที่จำเป็น
  const NavigationControls({
    required this.controller,
    required this.canGoBack,
    required this.canGoForward,
    required this.initialUrl,
    Key? key,
  }) : super(key: key);

  // กำหนดตัวแปรที่เกี่ยวข้อง
  /*
   ValueNotifier เป็นชนิดข้อมูลใน Flutter ซึ่งเป็น subclass ของ ChangeNotifier 
   ที่ใช้ในการเก็บข้อมูลและแจ้งเตือนผู้ฟัง (listeners) เมื่อค่าของข้อมูลเปลี่ยนแปลง 
   ชนิดข้อมูลนี้มีประโยชน์ในการจัดการสถานะ (state) อย่างง่ายดาย โดยไม่ต้องใช้ state management 
   library ที่ซับซ้อน เช่น Provider หรือ Bloc
  */
  final InAppWebViewController? controller;
  final ValueNotifier<bool> canGoBack;
  final ValueNotifier<bool> canGoForward;
  final String initialUrl;

  /*
  ValueListenableBuilder เป็น widget ที่ใช้ในการสร้าง UI ที่ฟังการเปลี่ยนแปลงค่าของ 
  ValueNotifier และทำการ rebuild UI เมื่อค่าของ ValueNotifier มีการเปลี่ยนแปลง
  */
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        ValueListenableBuilder<bool>(
          valueListenable: canGoBack,
          builder: (context, value, child) {
            return IconButton(
              icon: Icon(
                Icons.home,
                color: value ? Colors.white : Colors.white60,
              ),
              onPressed: value
                  ? () => controller?.loadUrl(
                      urlRequest: URLRequest(url: WebUri(initialUrl)))
                  : null,
            );
          },
        ),
        ValueListenableBuilder<bool>(
          valueListenable: canGoBack,
          builder: (context, value, child) {
            return IconButton(
              icon: Icon(
                Icons.arrow_back,
                color: value ? Colors.white : Colors.white60,
              ),
              onPressed: value ? () => controller?.goBack() : null,
            );
          },
        ),
        ValueListenableBuilder<bool>(
          valueListenable: canGoForward,
          builder: (context, value, child) {
            return IconButton(
              icon: Icon(
                Icons.arrow_forward,
                color: value ? Colors.white : Colors.white60,
              ),
              onPressed: value ? () => controller?.goForward() : null,
            );
          },
        ),
        IconButton(
          icon: const Icon(Icons.refresh),
          onPressed: () => controller?.reload(),
        ),
      ],
    );
  }
}