webview_flutter_plus

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

webview_flutter_plus は、webview_flutter パッケージを拡張し、アセットや文字列としてローカルの HTML、CSS、JavaScript ファイルを直接読み込むことを可能にします。インターネット接続が不要な状態で、Flutter アプリ内に静的ウェブコンテンツを簡単に埋め込むことができます。カスタムヘッダー、JavaScript チャネル通信、Flutter のウィジェットシステムとのシームレスな統合といった高度な機能をサポートしています。オフラインドキュメント、アプリ内チュートリアル、またはウェブ技術に依存するハイブリッドUIコンポーネントに最適です。

用途

オフラインHTMLドキュメントの読み込み
アプリにインタラクティブなウェブコンテンツを埋め込む
アセットファイルからの動的コンテンツの表示
HTML/CSS/JS を使ってアプリ内チュートリアルを作成する
レガシーウェブコンポーネントをFlutterに統合する

主な機能

アセットまたは文字列から HTML を読み込む
ローカルの CSS および JavaScript のサポート
JavaScriptチャネル通信
カスタムHTTPヘッダー
クロスプラットフォーム互換性（Android、iOS、macOS）
Flutter ウィジェットとの簡単な統合

適している対象

オフライン対応のアプリを開発する開発者
WebベースのUIコンポーネントを使用するチーム
インターネットなしで埋め込みウェブコンテンツが必要なアプリ
ハイブリッドアプリ開発者
教育的またはチュートリアル中心のアプリケーション

注意事項

pubspec.yaml での適切なアセット設定が必要です
バックエンドロジックと組み合わせない限り、静的コンテンツに限定される
ユーザー生成コンテンツに対して追加のセキュリティチェックが必要になる場合があります
動的なサーバー側レンダリングされたウェブページには適していません
パフォーマンスは、読み込まれたWebアセットの複雑さに依存します

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

webview_flutter_plus
Contents
About
Features
How to use?
- Android
- iOS
Example
- Please check example/lib/main.dart

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:

パッケージ、リポジトリ、アプリカテゴリを検索