Flutter应用内点击URL按钮如何不跳转外部浏览器直接展示网页

要实现点击按钮后在应用内部打开网页而非跳转到外部浏览器，可使用Flutter官方维护的webview_flutter插件完成，具体实现步骤如下：

步骤1：添加依赖 #

在项目根目录的pubspec.yaml文件中添加插件依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0 # 可替换为当前最新稳定版本

添加后执行flutter pub get命令安装依赖。

步骤2：配置平台权限 #

Android端配置 #

在android/app/src/main/AndroidManifest.xml的manifest标签下添加网络权限：

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

iOS端配置 #

在ios/Runner/Info.plist的dict标签下添加网络访问权限配置：

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

步骤3：创建内置网页页面 #

新建一个通用的网页承载页面，用于展示目标链接：

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

class WebViewPage extends StatefulWidget {
  // 传入要打开的链接和页面标题
  final String url;
  final String pageTitle;
  const WebViewPage({super.key, required this.url, required this.pageTitle});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController _webController;

  @override
  void initState() {
    super.initState();
    // 初始化网页控制器
    _webController = WebViewController()
      // 开启JavaScript支持，保证网页交互正常
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(widget.url));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.pageTitle),
      ),
      body: WebViewWidget(controller: _webController),
    );
  }
}

步骤4：修改原有按钮的点击逻辑 #

将原来调用launch打开外部浏览器的逻辑，替换为跳转到上面创建的内置网页页面：

Container(
  margin: const EdgeInsets.only(top: 380.0),
  child: Padding(
    padding: const EdgeInsets.all(60.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        SnakeButton(
          child: Text(
            "Blog",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 17,
            ),
          ),
          // 修改点击逻辑
          onTap: () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const WebViewPage(
                url: "https://nisaefendioglu.blog",
                pageTitle: "Blog",
              ),
            ),
          ),
        ),
      ],
    ),
  ),
),

如果需要实现网页前进、后退、刷新等操作，直接调用WebViewController对应的goBack()、goForward()、reload()方法即可。

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