Flutter教程WebView集成与使用

在Flutter中集成WebView时遇到几个问题：

  1. 使用webview_flutter插件加载网页时，安卓端黑屏但iOS正常，如何解决？
  2. WebView如何与Flutter侧交互？比如从网页JS调用Dart方法或反向传递数据？
  3. 加载HTTPS链接出现证书错误时，如何在debug/release模式下分别处理？
  4. 有没有办法控制WebView的缓存策略？比如强制刷新或禁用缓存
  5. 遇到复杂网页（含视频/iframe）性能卡顿，有哪些优化建议？
  6. 官方插件和第三方插件（如flutter_inappwebview）该如何选择？各有什么优缺点？
3 回复

作为一个屌丝程序员，我来简单说下如何在Flutter中集成和使用WebView。

首先，在pubspec.yaml里添加webview_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.2.1

接着运行flutter pub get更新依赖。

在代码中引入：

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

创建一个StatefulWidget用来加载网页：

class MyWebPage extends StatefulWidget {
  @override
  _MyWebPageState createState() => _MyWebPageState();
}

class _MyWebPageState extends State<MyWebPage> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView示例')),
      body: WebView(
        initialUrl: 'https://www.baidu.com',
        onWebViewCreated: (controller) {
          _controller = controller;
        },
      ),
    );
  }
}

这样就完成了基本的WebView集成。你可以通过WebViewController调用JS、加载URL等操作。注意，WebView插件依赖原生组件，所以要确保配置好相关权限。

更多关于Flutter教程WebView集成与使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中集成WebView非常简单。首先确保安装了webview_flutter插件，在pubspec.yaml里添加：

dependencies:
  webview_flutter: ^4.0.1

运行flutter pub get获取依赖。

接着在代码中导入并使用：

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

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView 示例'),
      ),
      body: WebView(
        initialUrl: 'https://www.baidu.com', // 加载的网页地址
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        javascriptMode: JavascriptMode.unrestricted, // 启用JS
      ),
    );
  }
}

注意：从Android 9.0开始，WebView需要网络权限，确保在AndroidManifest.xml中添加：

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

iOS无需额外配置即可使用WebView。如果遇到加载失败，检查URL是否正确以及网络权限设置。

Flutter WebView集成与使用教程

在Flutter中集成WebView可以使用webview_flutter插件，这是官方维护的插件，支持Android和iOS平台。

基本步骤

1. 添加依赖

在pubspec.yaml文件中添加依赖：

dependencies:
  webview_flutter: ^4.4.0

运行flutter pub get获取依赖。

2. 基础使用

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

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

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://flutter.dev'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter WebView')),
      body: WebViewWidget(controller: controller),
    );
  }
}

进阶功能

1. 加载本地HTML

controller.loadHtmlString('''
  <html>
    <body>
      <h1>本地HTML</h1>
    </body>
  </html>
''');

2. 添加导航控制

Scaffold(
  appBar: AppBar(
    title: const Text('WebView'),
    actions: [
      IconButton(
        icon: const Icon(Icons.arrow_back),
        onPressed: () async {
          if (await controller.canGoBack()) {
            controller.goBack();
          }
        },
      ),
      IconButton(
        icon: const Icon(Icons.arrow_forward),
        onPressed: () async {
          if (await controller.canGoForward()) {
            controller.goForward();
          }
        },
      ),
    ],
  ),
  body: WebViewWidget(controller: controller),
);

3. 处理JavaScript交互

controller
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel(
    'Message',
    onMessageReceived: (JavaScriptMessage message) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(message.message)),
      );
    },
  );

注意事项

  1. 在iOS上需要在Info.plist中添加：
<key>io.flutter.embedded_views_preview</key>
<true/>

  1. Android平台可能需要配置android:usesCleartextTraffic="true"以允许HTTP连接。

  2. 对于更复杂的需求可以使用flutter_inappwebview插件，它提供了更多功能。

回到顶部