shah-xad / webview_flutter_plus Goto Github PK
View Code? Open in Web Editor NEWAn extension of webview_flutter to load HTML,CSS and Javascript even from Assets or Strings.
Home Page: https://pub.dev/packages/webview_flutter_plus
License: Other
An extension of webview_flutter to load HTML,CSS and Javascript even from Assets or Strings.
Home Page: https://pub.dev/packages/webview_flutter_plus
License: Other
webview language not change with local language is there any solution for that?
want to zoom html on initstate without guester.
webView show as black screen with FLAG_SECURE in all device not support Chrome as Android system WebView Provider
in android 10 ,
and Huawei modern devices ,
can you supply any code to pass this issues
Hi,
Does this plugin provide serviceworker support for an offline cache of web-pages to view the pages offline from the cache?
Just like how PWA works for the web, Does Plugin support serviceworker.js file and load and store the pages from/on a cache?
Thanks
Hello @shah-xad, could you help me, I'm using
onWebViewCreated: (controller) {
_controller = controller;
_controller!
.loadUrl(Uri.dataFromString(_sharedState.message!.body!, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());
},
navigationDelegate: (request) async {
final String? url = request.url;
if (url != null && (url.startsWith('http') || url.startsWith('www'))) {
UrlLaunchHelper.tryLaunch(url);
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},
and response data:text/html;charset=utf-8,%3Cp%3Ehttps://www.youtube.com/watch?v=BrGpNPvBu4c%3C/p%3E
I use it in my project, there will be a crash problem, how to solve this problem?
import 'package:webview_flutter_plus/webview_flutter_plus.dart';
class TopicWebTemplateView extends StatefulWidget {
@override
_TopicWebTemplateViewState createState() => _TopicWebTemplateViewState();
}
class _TopicWebTemplateViewState extends State<TopicWebTemplateView> {
WebViewPlusController _controller;
double _height = 1;
@override
Widget build(BuildContext context) {
return ListView(
children: [
SizedBox(
height: _height,
child: WebViewPlus(
onWebViewCreated: (controller) {
this._controller = controller; // assets/html/test/index.html
controller.loadUrl('https://www.jianshu.com/p/0d0ebb663f55?utm_campaign=haruki'); // assets/html/topic_template/index.html
},
onPageFinished: (url) {
_controller.getHeight().then((double height) {
print("Height: " + height.toString());
setState(() {
_height = height;
});
});
},
// javascriptMode: JavascriptMode.unrestricted,
),
)
],
I can't load the local html file when there is a space in its name (assets/file/test 1.html); tested with no sapces and it's working.
ps: I can't remove the spaces, I have 100s of files, and I need to keep the name like that.
Android device cannot long press copy
IOS normal
I have the following issue when using the plugin:
W/System (17063): A resource failed to call release.
W/System (17063): A resource failed to call release.
W/PlatformViewsController(17063): Creating a virtual display of size: [1080, 6675] may result in problems(flutter/flutter#2897 is larger than the device screen size: [1080, 1884].
E/InputMethodManager(17063): b/117267690: Failed to get fallback IMM with expected displayId=37 actual IMM#displayId=0 view=io.flutter.plugins.webviewflutter.InputAwareWebView{6511e40 VFEDHVC.. ........ 0,0-1080,6675}
I/chromium(17063): [INFO:CONSOLE(123)] "Uncaught ReferenceError: jQuery is not defined", source:
E/InputMethodManager(17063): b/117267690: Failed to get fallback IMM with expected displayId=37 actual IMM#displayId=0 view=io.flutter.plugins.webviewflutter.InputAwareWebView{6511e40 VFEDHVC.. ........ 0,0-1080,6675}
E/chromium(17063): [ERROR:aw_browser_terminator.cc(125)] Renderer process (28337) crash detected (code -1).
And this is my implementation:
SizedBox(
height: _containerHeight,
child: WebViewPlus(
onWebViewCreated: (controller) {
controller = controller;
controller.loadUrl(Uri.dataFromString(widget.articleModel.body,
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8'))
.toString());
},
onPageFinished: (url) {
controller.getHeight().then((double height) {
print("Height: " + height.toString());
setState(() {
_containerHeight = height;
});
});
},
javascriptMode: JavascriptMode.unrestricted,
),
);
The widget.articleModel.body does not contain any html or body tags, it's just paragraph tags
I'm loading html file locally, it contain large image and can't fit on device width, so I need the webview to scroll horizontally, is it possible?
I have added flutter_html 2.0.0 to my project which displays blog content. Tweets and other embedded posts are not rendering properly. I think there is no javascript support and because of that, the rendering is not working.
Can anyone please help me out with this?
Thanks in advance 😊
the app is force close when rendering larger html data
errorr message :
Creating a virtual display of size: [1080, 33424] may result in problems(https://github.com/flutter/flutter/issues/2897).It is larger than the device screen size: [1080, 2088].
gesturerecogniser does not work with webview_flutter_plus as in official webview_flutter
Facing multiple times, While after app is in background after couple couple of minus back. getting error error Could not connect to server. Kindly update me with this error.. Not able to find how to start server. on error.
I have converted a simple C++ code with a sum function to a sum.wasm file.
can I use the sum function in flutter android app using webview_flutter_plus ?
any new updates ??
There is an error when playing video with some Samsung devices with ExoPlayer
This is a link to view the error here
This error was still present with older versions of Filter
Here's a link to view it here
Is there a way to fix the error in our web view
These are the error messages I see
[ +6 ms] V/Surface (15228): sf_framedrop debug : 0x4f4c, game : false, logging : 0
[ ] D/SurfaceUtils(15228): connecting to surface 0x8cf0c808, reason connectToSurface
[ ] I/MediaCodec(15228): [OMX.SEC.avc.sw.dec] setting surface generation to 15593475
[ ] D/SurfaceUtils(15228): disconnecting from surface 0x8cf0c808, reason connectToSurface(reconnect)
[ ] D/SurfaceUtils(15228): connecting to surface 0x8cf0c808, reason connectToSurface(reconnect)
[ ] E/ACodec (15228): [OMX.SEC.avc.sw.dec] setPortMode on output to DynamicANWBuffer failed w/ err -22
[ ] I/ACodec (15228): can't find wfdsink-exynos-enable
[ +11 ms] I/ACodec (15228): [OMX.SEC.avc.sw.dec] Now Loaded->Idle
[ +20 ms] I/ACodec (15228): [OMX.SEC.avc.sw.dec] Now Idle->Executing
[ ] I/ACodec (15228): [OMX.SEC.avc.sw.dec] Now Executing
[ +114 ms] D/MediaCodec(15228): [OMX.SEC.avc.sw.dec] setting dataspace on output surface to #104
[ +17 ms] D/SoftwareRenderer(15228): setting dataspace on output surface to #104
[ +41 ms] D/ViewRootImpl@45738a0[MainActivity](15228): Relayout returned: old=[0,0][1920,1200] new=[0,0][1920,1200] result=0x1 surface={valid=true 3326400512} changed=false
[ +39 ms] D/AudioManager(15228): dispatching onAudioFocusChange(-1) to android.media.AudioManager$60412bforg.chromium.content.browser.AudioFocusDelegate$c2c5d8c
[+105464 ms] D/ViewRootImpl@45738a0[MainActivity](15228): ViewPostIme key 0
[ +99 ms] D/ViewRootImpl@45738a0[MainActivity](15228): ViewPostIme key 1
[+1015 ms] D/OpenGLRenderer(15228): eglDestroySurface = 0xba15f4a0, 0xc7e69800
[ +76 ms] W/cr_MediaCodecBridge(15228): Releasing: OMX.SEC.avc.sw.dec
[ +1 ms] D/ (15228): PlayerBase::stop() from IPlayer
the getHeight calculation appears to ignore the height of the loading image within the html content. In particular on iOS devices.
I'm trying to use the webviewplus to display the html content of several community posts on the same page, but some are cut short while others are much longer than needed for the content.
I use webview to show html content received through API and it works great.
However I have an issue, when I increase font size in the device settings web view font is increased, is there any way to prevent this. We have font size set in css that is also sent from the backend and I would like font size to be fully controlled by CSS.
Thanks!
Please integrate your source code with solution mentioned at https://crizantlai.medium.com/flutter-how-to-make-webview-transparent-9e3ce25d8d0
Hello,
Thank you for this package. I can not figure out why the URL I passed lead to a blanc page and throw the following error:
Unable to load asset: https://www.servicesadom.com/index.html
When I try my URL in a regular browser, it works well.
The website I am trying to display has been made in Flutter too. This might be linked to the issue, I guess...
Here is the URL I am using: https://www.servicesadom.com/#/
Any idea ?
Many thanks,
Benjamin
After upgrade to lastese verion, load html from String is not working.
Can anyone please help me out with this?
Thanks in advance.
// pubspec.yaml
dependencies:
flutter:
sdk: flutter
webview_flutter_plus: ^0.2.1+1
// WebViewPage.dart
class WebViewPage extends StatefulWidget {
WebViewPage({Key? key}) : super(key: key);
@override
_WebViewPageState createState() => _WebViewPageState();
}
class _WebViewPageState extends State<WebViewPage> {
@override void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("WebViewPlus"),
),
body: WebViewPlus(
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
controller.loadString(r"""
<html lang="en">
<body>hello world</body>
</html>"""
);
},
),
);
}
}
runJavascriptReturningResult('somePromiseMethod()'),show this error:"JavaScript execution returned a result of an unsupported type"
It does not work on iOS for me the same code i use on adndroid and it works perfectly for some reason it does not work on ios
return SizedBox( height: advertHeight, child: WebViewPlus( onWebViewCreated: (controller) { controller.loadString(fixed); this._adsController = controller; }, onPageFinished: (url) { _adsController.getHeight().then((double height) { print("Height: " + height.toString()); setState(() { advertHeight = height; }); }); }, javascriptMode: JavascriptMode.unrestricted, gestureNavigationEnabled: true, navigationDelegate: (NavigationRequest request) { if (request.url.startsWith('https') || request.url.startsWith('http')) { openAd(request.url); } return NavigationDecision.prevent; }, onWebResourceError: (error) { setState(() { advertHeight = 0; }); }, ), );
Hi there, I created a wysiwyg editor using this webview, and it requires me to be able to insert local image assets. do you have a way to do that?
Btw i'm using localhtml by string.
This is issue i got from the log cat. Creating a virtual display of size: [1028, 6345] may result in problems(flutter/flutter#2897). It is larger than the device screen size: [1080, 2094].
I am sure the canvas size is larger than virtual display size.
I created sample application and i fallowed all the steps which is mentioned in readme file , i not able to run application getting below error. please help me on this.
i'm using flutter 3.10.1 stable version
flutter_macos_3.10.1-stable.zip
error :
This app is linked to the debug service: ws://127.0.0.1:58195/xyewlNyfcPk=/ws
js_primitives.dart:30 Server Error: Unsupported operation: ServerSocket.bind dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:49 throw
dart-sdk/lib/_internal/js_dev_runtime/patch/io_patch.dart 470:5 _bind
dart-sdk/lib/io/socket.dart 309:27 bind
dart-sdk/lib/_http/http_impl.dart 3184:10 bind
dart-sdk/lib/_http/http.dart 191:19 bind
packages/webview_flutter_plus/src/webview_flutter_plus.dart 882:61
Because webview_flutter_plus >=0.3.0+2 depends on webview_flutter ^3.0.1 and project depends on webview_flutter ^4.0.6, webview_flutter_plus >=0.3.0+2 is forbidden.
So, because project depends on webview_flutter_plus ^0.3.0+2, version solving failed.
I have an html page that has some inputs that open a numeric keyboard. The problem is that they show up for like half a second and then an alpha numerical keyboard shows up. How to solve this issue? I really need that numeric keyboard. I'm using an Html file from my assets.
I have some URLs inside a webview
in a listview
and when users click on any URL, I want it to be opened inside a browser rather opening inside the webview
. Is it possible? Could you please tell me how can I achieve this?
I download the html file and its zip, and unzip it to a folder in local temporary directory, it includes all the CSS and scripts,and also some assets like videos and images in local. I could get the index.html file path, and could run the index.html in local chrome, but how could I use webview_flutter_plus to load the index.html from local disk?
Your library is dependent on WebView_Flutter with the latest being webview_flutter: ^4.4.2, there is a non-exhaustive change to the API. [WEBVIEW](WebView Flutter).
Kindly update to the latest API changes with deprecated note [showing workings] for guidance to enable users of your package enjoy the latest version of WebView-Flutter as we currently stuck with the old version.
Hi im trying to integrate Formio using my webview_flutter_plus.
I was able to get the same code up and working in native kotlin android application.
I have added the formio components in my assets/ in my flutter app
But when im trying to load the same HTML string using webview i get error
Uncaught ReferenceError: Formio is not defined
I have pasted my flutter webview code below for reference
WebViewPlus(
onWebViewCreated: (controller) {
this._controller = controller;
controller.loadString(getFormioHtmlString());
},
onPageFinished: (url) {
_controller?.getHeight().then((double height) {
print("Height: " + height.toString());
setState(() {
_height = height;
});
});
},
javascriptMode: JavascriptMode.unrestricted,
),
String getFormioHtmlString() {
return " \n" +
" \n" +
" \n" +
" \n" +
" <script src='assets/formio/app/jquery/jquery.min.js'></script>\n" +
" <script src='assets/formio/app/jquery/jquery.slim.min.js'></script>\n" +
" <script src='assets/formio/app/bootstrap/js/bootstrap.bundle.min.js'></script>\n" +
" <script src='assets/formio/dist/formio.full.min.js'></script>\n" +
"" +
formioScript(webViewController.formioModel) +
" \n" +
" \n" +
"
\n" +
" \n" +
"";
}
String formioScript(FormioModel formIoModel) {
return "<script type='text/javascript'>\n" +
" let formVar;\n" +
" window.onload = function() {\n" +
" Formio.createForm(document.getElementById('formio'),\n" +
" ${formIoModel.formConfig},\n" +
" {readOnly: ${formIoModel.readOnly}})\n" +
" .then(function(form) {\n" +
" formVar = form;\n" +
" " +
observeFormioChanges() +
" " +
attachFocusListener() +
" " +
preFillFormData(formIoModel.formData) +
" })\n" +
" }\n" +
"" +
declareSubmitForm() +
"" +
declareSetInputValue() +
" </script>\n";
}.
Hello,
I am using your package to display an html content from my assets. It works great but the default size it a bit too small and does not uses all the width of the screen.
Is there some adjustments I can do to better fit with my screen?
Thank you,
Benjamin.
What about web?
What I intend to do:
I installed threejs from npm and then loading the local min script package to the html and it shows this error.
What the error is:
I/chromium( 9481): [INFO:CONSOLE(0)] "Refused to execute script from 'http://localhost:39875/node_modules/three/build/three.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.", source: http://localhost:39875/sketch.html (0)
Other things I did:
Temporary solution:
Here is a snippet of what I'm trying to do.
sketch.html
<!DOCTYPE html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body></body>
<script src="./node_modules/three/build/three.min.js"></script>
</html>
sketch.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter_plus/webview_flutter_plus.dart';
class Sketch extends StatefulWidget {
const Sketch({super.key});
@override
State<Sketch> createState() => _SketchState();
}
class _SketchState extends State<Sketch> {
@override
void initState() {
if (Platform.isAndroid) {
WebViewPlus.platform = SurfaceAndroidWebView();
}
super.initState();
}
@override
Widget build(BuildContext context) {
return const WebViewPlus(
initialUrl: 'sketch.html',
javascriptMode: JavascriptMode.unrestricted,
);
}
}
https://gyazo.com/8223832b4d5845d2db17dd4d07e2e742
I am unable to load associated CSS files from index.HTML
The error of Server Error: SocketException: Failed to create server socket in release mode while running example in release code at the time of installation of the app on real devices but working fine in debug mode.
`[ +2 ms] Stopping app 'app.apk' on Samsung device.
[ ] executing: E:\Android\Sdk\platform-tools\adb.exe -s RF8M31KVFRK shell am force-stop pk.digit.psp512
[ +143 ms] executing: E:\Android\Sdk\platform-tools\adb.exe -s RF8M31KVFRK shell pm list packages pk.digit.psp512
[ +132 ms] package:pk.digit.psp512
[ ] executing: E:\Android\Sdk\platform-tools\adb.exe -s RF8M31KVFRK shell cat /data/local/tmp/sky.pk.digit.psp512.sha1
[ +83 ms] 70ff7451cc2a7b7ceb3814ff84b954977b2bceaf
[ ] Installing APK.
Installing build\app\outputs\flutter-apk\app.apk...
[{"event":"app.progress","params":{"appId":"0ecd9132-8bc0-4716-9602-fff31dace201","id":"1","progressId":null,"message":"Installing build\app\outputs\flutter-apk\app.apk...","finished":false}}]
[ ] executing: E:\Android\Sdk\platform-tools\adb.exe -s RF8M31KVFRK install -t -r D:\Applications\StudioProjects\psp512\build\app\outputs\flutter-apk\app.apk
[+24193 ms] Performing Streamed Install
adb: failed to install D:\Applications\StudioProjects\psp512\build\app\outputs\flutter-apk\app.apk: Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package pk.digit.psp512 signatures do not match previously installed version; ignoring!]
[{"event":"app.progress","params":{"appId":"0ecd9132-8bc0-4716-9602-fff31dace201","id":"1","progressId":null,"finished":true}}]
[ ] Warning: Failed to install APK.
[ ] Uninstalling old version...
[ ] executing: E:\Android\Sdk\platform-tools\adb.exe -s RF8M31KVFRK uninstall pk.digit.psp512
[ +1 ms] Error: ADB exited with exit code 1
[ ] Performing Streamed Install
adb: failed to install D:\Applications\StudioProjects\psp512\build\app\outputs\flutter-apk\app.apk: Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package pk.digit.psp512 signatures do not match previously installed version; ignoring!]
[+1828 ms] Success
Installing build\app\outputs\flutter-apk\app.apk...
[{"event":"app.progress","params":{"appId":"0ecd9132-8bc0-4716-9602-fff31dace201","id":"2","progressId":null,"message":"Installing build\app\outputs\flutter-apk\app.apk...","finished":false}}]
[ ] executing: E:\Android\Sdk\platform-tools\adb.exe -s RF8M31KVFRK install -t -r D:\Applications\StudioProjects\psp512\build\app\outputs\flutter-apk\app.apk
[+28195 ms] Performing Streamed Install
Success
[{"event":"app.progress","params":{"appId":"0ecd9132-8bc0-4716-9602-fff31dace201","id":"2","progressId":null,"finished":true}}]
[ ] executing: E:\Android\Sdk\platform-tools\adb.exe -s RF8M31KVFRK shell echo -n c3717545dcb851d2ff0a7f615f7d02a41ae418b8 > /data/local/tmp/sky.pk.digit.psp512.sha1
[ +74 ms] executing: E:\Android\Sdk\platform-tools\adb.exe -s RF8M31KVFRK shell am start -a android.intent.action.MAIN -c android.intent.category.LAUNCHER -f 0x20000000 --ez enable-dart-profiling true pk.digit.psp512/pk.digit.psp512.MainActivity
[ +218 ms] Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] flg=0x20000000 cmp=pk.digit.psp512/.MainActivity (has extras) }
[ +1 ms] Application running.
[{"event":"app.started","params":{"appId":"0ecd9132-8bc0-4716-9602-fff31dace201"}}]
[ +429 ms] I/flutter (21016): Server Error: SocketException: Failed to create server socket (OS Error: Operation not permitted, errno = 1), address = localhost, port = 53053 #0 _NativeSocket.bind (dart:io-patch/socket_patch.dart:996)
[ ] I/flutter (21016): `
here is flutter doctor v
`[√] Flutter (Channel stable, 3.3.10, on Microsoft Windows [Version 10.0.19045.2604], locale en-US)
• Flutter version 3.3.10 on channel stable at E:\Android\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 135454af32 (10 weeks ago), 2022-12-15 07:36:55 -0800
• Engine revision 3316dd8728
• Dart version 2.18.6
• DevTools version 2.15.0
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at E:\Android\Sdk
• Platform android-33-ext4, build-tools 33.0.1
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.1)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.4.33110.190
• Windows 10 SDK version 10.0.22000.0
[√] Android Studio (version 2022.1)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619)
[√] VS Code (version 1.75.1)
• VS Code at C:\Users\DIGIT\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.58.0
[√] Connected device (4 available)
• SM G973F (mobile) • RF8M31KVFRK • android-arm64 • Android 12 (API 31)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19045.2604]
• Chrome (web) • chrome • web-javascript • Google Chrome 110.0.5481.104
• Edge (web) • edge • web-javascript • Microsoft Edge 110.0.1587.50
[√] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!`
can I load html from String, but css and js from local files in assets?
I wamt to load html from String .loadString
at the same time, I want to us css and JavaScript local files in assets folder.
is it possible?
is it also possible to bring up a custmised context menu after text is selected?
many thanks for your good work.
This was the error:
Unsupported operation: Trying to use the default webview implementation for TargetPlatform.windows but there isn't a default one
This project was working fine 2 months ago... now I returned to this project... and seeing this error...
when I load local html which is built by vue-cli, but i got an error:
Refused to execute http://localhost:52746/assets/dist/js/app.f3d1d93c.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.
How can I fix it? Is it useful to set headers of arguments?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.