webview_flutter_plus 0.1.1+8 
webview_flutter_plus: ^0.1.1+8 copied to clipboard
shahxad.comAn extension of webview_flutter to load local HTML,CSS and Javascript from Assets or Strings and much more.
webview_flutter_plus #
Contents #
About #
webview_flutter_plus is a powerful extension of webview_flutter. This package helps to load Local HTML, CSS and Javascript content from Assets or Strings. This inherits all features of webview_flutter with minor API changes.
Do check flutter_tex a powerful implementation of this package.
What's unique in webview_flutter_plus #
- Load HTML, CSS and Javascript content from Assets, see example.
- Load HTML, CSS and Javascript content from Strings, see example.
- Get height of Web content which will allow you to use
WebviewPluswidget even in list view, see example. - It includes all features of its parent plugin webview_flutter.
How to use? #
1: Add this to your package's pubspec.yaml file:
dependencies:
webview_flutter_plus: ^0.1.1+8
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" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
iOS #
Add following code in your <project-directory>/ios/Runner/Info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key> <true/>
</dict>
<key>io.flutter.embedded_views_preview</key> <true/>
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:
Examples #
Loading From String
WebViewPlus(
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
controller.loadString(r"""
<html lang="en">
<body>hello world</body>
</html>
""");
},
)
Loading from Assets with code Injection
It is mandatory to mention all associated HTML, CSS and Javascript files in pubspecs.yaml under assets:
WebViewPlus(
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
controller.loadUrl('assets/index.html',
codeInjections: () => [
CodeInjection(
from:
'//||||||||||||||INJECT HERE|||||||||||||||||||',
to: "This is an injected Code")
]); // you need to add '//||||||||||||||INJECT HERE|||||||||||||||||||' in your index.html where you want to inject code.
},
)
Use in ListView
WebViewPlusController also allows you to get WebViewPlus height like controller.getWebviewPlusHeight()
WebViewPlusController _controller;
double _height = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView Example'),
),
body: ListView(
children: [
SizedBox(
height: _height,
child: WebViewPlus(
onWebViewCreated: (controller) {
this._controller = controller;
controller.loadUrl('assets/index.html');
},
onPageFinished: (url) {
_controller.getWebviewPlusHeight().then((double height) {
print("Height: " + height.toString());
setState(() {
_height = height;
});
});
},
javascriptMode: JavascriptMode.unrestricted,
),
)
],
),
);
}
Plus APIs #
WebViewPlusController controller;
controller.loadUrl('path/to/index.html')load HTML content from Assets.controller.loadString(r"<html>HTML, CSS and Javascript code in raw string</html>");load HTML, CSS and Javascript Code from a String.controller.getWebviewPlusHeight()returns height of WebViewPlus.
API differences from webview_flutter #
There are very minor API differences as following.
| webview_flutter | webview_flutter_plus |
|---|---|
WebView |
WebViewPlus |
WebViewPlusController |
WebViewPlusController |
WebViewCreatedCallback |
WebViewPlusCreatedCallback |
Rest everything is same as webview_flutter.
Metadata
Publisher
Weekly Downloads
Metadata
An extension of webview_flutter to load local HTML,CSS and Javascript from Assets or Strings and much more.
Repository (GitHub)
View/report issues
License
unknown (license)
Dependencies
flutter, mime, webview_flutter
