Flutter如何在应用内浏览器窗口打开链接并修改浏览器窗口头部

方案1：使用官方维护的 url_launcher 包（轻量需求首选） #

这是Flutter官方维护的插件，无需自行封装WebView即可快速实现应用内打开网页，满足基础使用需求。

• 第一步：添加依赖
  在项目pubspec.yaml文件中添加依赖配置：

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.2.5 # 可替换为当前最新版本

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

• 第二步：配置平台权限
  • 安卓配置：在android/app/src/main/AndroidManifest.xml的manifest标签下添加查询规则：

    <queries>
      <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="https" />
      </intent>
    </queries>
    

  • iOS配置：在ios/Runner/Info.plist的dict标签下添加白名单配置：

    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>https</string>
      <string>http</string>
    </array>
    

• 第三步：编写调用代码

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

void openInAppBrowser(BuildContext context, String targetUrl) async {
  final Uri url = Uri.parse(targetUrl);
  if (await canLaunchUrl(url)) {
    await launchUrl(
      url,
      // 指定打开模式为应用内WebView
      mode: LaunchMode.inAppWebView,
      // 可选配置项：自定义WebView能力
      webViewConfiguration: const WebViewConfiguration(
        enableJavaScript: true,
        enableDomStorage: true,
      ),
    );
  } else {
    if (context.mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('无法打开该链接')),
      );
    }
  }
}

需要打开链接时，直接传入上下文和目标链接调用该方法即可。

方案2：使用 flutter_inappwebview 包（自定义需求首选） #

如果需要自定义浏览器UI、拦截页面请求、注入JS交互等进阶功能，可以使用该第三方包，灵活性更高。

• 第一步：在pubspec.yaml添加依赖并执行安装

dependencies:
  flutter_inappwebview: ^6.0.0 # 可替换为当前最新版本

• 第二步：示例代码

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

class CustomInAppBrowser extends StatelessWidget {
  final String targetUrl;
  const CustomInAppBrowser({super.key, required this.targetUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('网页浏览')),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: WebUri(targetUrl)),
        // 可自行扩展加载进度条、JS交互、页面跳转拦截等逻辑
        onProgressChanged: (controller, progress) {
          // 自定义进度条实现逻辑
        },
      ),
    );
  }
}

调用时直接将该页面push到路由栈即可。

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