webview_flutter如何使用

如何在Flutter项目中正确集成和使用webview_flutter插件？我按照官方文档添加依赖后，运行时提示找不到插件或报错。需要具体步骤说明：

  1. 如何添加依赖到pubspec.yaml？
  2. iOS和Android是否需要额外配置？
  3. 加载本地HTML和远程URL的代码示例
  4. 如何处理页面加载进度和错误回调？
  5. 能否与JavaScript交互？求完整示例代码和常见问题解决思路。
2 回复

在Flutter中使用webview_flutter插件：

  1. 在pubspec.yaml中添加依赖：webview_flutter: ^4.2.2。
  2. 导入包：import 'package:webview_flutter/webview_flutter.dart';。
  3. 使用WebView组件，设置initialUrl加载网页。
  4. 可配置javascriptMode启用JavaScript。

更多关于webview_flutter如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


WebView Flutter 是 Flutter 中用于嵌入网页的插件，以下是基本使用方法：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  webview_flutter: ^4.4.2

运行 flutter pub get

2. 基本使用

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

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView示例')),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        onWebViewCreated: (WebViewController webViewController) {
          controller = webViewController;
        },
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

3. 主要参数说明

  • initialUrl: 初始加载的URL
  • javascriptMode: JavaScript模式（unrestricted/disabled）
  • onPageStarted: 页面开始加载回调
  • onPageFinished: 页面加载完成回调
  • onWebViewCreated: WebView创建完成回调

4. 控制器常用方法

// 加载URL
controller.loadUrl('https://example.com');

// 执行JavaScript
controller.runJavascript('alert("Hello")');

// 前进/后退
controller.goBack();
controller.goForward();

// 重新加载
controller.reload();

5. 注意事项

  • Android需要网络权限
  • iOS需要在 Info.plist 中配置ATS
  • 支持本地HTML文件加载

这是 WebView Flutter 的基本使用方法，可根据具体需求添加更多功能。

回到顶部