搜尋套件、儲存庫與 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 項

原始碼儲存庫

使用此套件的專案