搜索插件、代码仓与 APP 分类

插件详情v0.4.21

webview_flutter_plus

webview_flutter 的扩展,用于从 Assets 或字符串加载本地 HTML、CSS 和 JavaScript 等内容。

AndroidiOSmacOS
近 30 天下载
2.1万
喜欢数
168
Pub 分数
160

安装插件

flutter pub add webview_flutter_plus

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

webview_flutter_plus 扩展了 webview_flutter 包,以支持直接从 assets 或字符串加载本地 HTML、CSS 和 JavaScript 文件。它简化了在 Flutter 应用中嵌入静态网页内容的过程,无需互联网连接。该包支持自定义请求头、JavaScript 通道通信以及与 Flutter 小部件系统的无缝集成。适用于离线文档、应用内教程或依赖网页技术的混合 UI 组件。

适合场景

  • 加载离线HTML文档
  • 在应用中嵌入交互式网页内容
  • 从资产文件显示动态内容
  • 使用 HTML/CSS/JS 创建应用内教程
  • 将遗留的 Web 组件集成到 Flutter 中

主要特点

  • 从资源或字符串加载 HTML
  • 对本地 CSS 和 JavaScript 的支持
  • JavaScript 通道通信
  • 自定义 HTTP 标头
  • 跨平台兼容性(Android、iOS、macOS)
  • 与 Flutter 小部件的轻松集成

适合对象

  • 开发离线功能的应用程序的开发者
  • 使用基于 Web 的 UI 组件的团队
  • 需要嵌入网页内容但无需互联网的应用程序
  • 混合应用开发者
  • 教育或教程导向的应用程序

使用建议

  • 需要在 pubspec.yaml 中进行正确的资产配置
  • 仅限静态内容,除非与后端逻辑结合
  • 可能需要对用户生成的内容进行额外的安全检查
  • 不适用于动态服务器端渲染的网页
  • 性能取决于加载的网络资源的复杂性

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

webview_flutter_plus

Contents

About

webview_flutter_plus is an extension of webview_flutter. This package helps to load Local HTML, CSS and Javascript content from Assets or Strings via a local server. This inherits all features of webview_flutter with minor API changes in WebViewController.

Do check flutter_tex an implementation of this package.

Features

  • Load Local HTML, CSS and Javascript (and all kind of web) content from Assets via a local server.
  • Get WebViewWidget height to render in a ListView.

How to use?

1: Add this to your package's pubspec.yaml file:

dependencies:
  webview_flutter_plus: ^0.4.20

2: You can install packages from the command line:

$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3: Now you need to put the following implementations in Android and iOS respectively.

Android

Make sure to add this line android:usesCleartextTraffic="true" in your <project-directory>/android/app/src/main/AndroidManifest.xml under application like this.

<application
       android:usesCleartextTraffic="true">
</application>

Required Permissions are:

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

Add following code in your <project-directory>/ios/Runner/Info.plist

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

4: Now in your Dart code, you can use:

import 'package:webview_flutter_plus/webview_flutter_plus.dart'; 

5: Now you can use WebViewPlus as a widget:

Example

Please check example/lib/main.dart

所属分类

依赖

依赖清单 3 项

源码仓库

使用此插件的项目