如何将url_launcher的inAppWebView作为Widget嵌入Flutter应用？

要在Scaffold的body中嵌入网页并保留AppBar和底部导航栏，推荐使用以下两个成熟的Flutter包：

一、使用官方推荐的webview_flutter包 #

这是Flutter官方维护的WebView组件，能满足基础的网页嵌入需求。

实现步骤： #

1. 添加依赖
   在pubspec.yaml中加入：

dependencies:
  webview_flutter: ^4.4.0

执行flutter pub get完成依赖安装。

2. 导入包

import 'package:webview_flutter/webview_flutter.dart';

3. 实现WebView作为Scaffold的body
   示例代码：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewScreen extends StatefulWidget {
  const WebViewScreen({super.key});

  @override
  State<WebViewScreen> createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    // 初始化WebView控制器
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted) // 开启JavaScript支持
      ..loadRequest(Uri.parse('https://example.com')); // 加载目标网页
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('嵌入网页示例')),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
        ],
      ),
      body: WebViewWidget(controller: controller), // 将WebView作为body
    );
  }
}

平台配置注意： #

• iOS：若加载HTTP协议的网页，需在Info.plist中添加以下配置以绕过App Transport Security限制：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

• Android：在AndroidManifest.xml中添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

二、使用功能更丰富的flutter_inappwebview包 #

如果需要更复杂的Web交互（如JS与Flutter双向通信、自定义缓存、拦截请求等），可以选择这个第三方包。

实现步骤： #

1. 添加依赖

dependencies:
  flutter_inappwebview: ^6.0.0

执行flutter pub get完成依赖安装。

2. 导入包

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

3. 实现InAppWebView作为Scaffold的body
   示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class InAppWebViewScreen extends StatefulWidget {
  const InAppWebViewScreen({super.key});

  @override
  State<InAppWebViewScreen> createState() => _InAppWebViewScreenState();
}

class _InAppWebViewScreenState extends State<InAppWebViewScreen> {
  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('高级网页嵌入')),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
        ],
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse('https://example.com')),
        initialSettings: InAppWebViewSettings(
          javaScriptEnabled: true,
          useOnDownloadStart: true, // 支持下载监听
        ),
        onWebViewCreated: (controller) {
          webViewController = controller;
        },
        onLoadStop: (controller, url) async {
          // 网页加载完成后的回调
        },
      ),
    );
  }
}

额外功能说明： #

这个包支持更多高级特性，比如：

• 监听网页加载进度
• Flutter与网页JS互相调用
• 自定义网页缓存策略
• 拦截网络请求

内容的提问来源于stack exchange，提问作者mohammadmnyer