Flutter Tutorial - WebView App | Local HTML, CSS, Javascript 2/3

Create a Flutter WebView App Example from GitHub Plugin that allows to load URLs, display web pages with local HTML, run Javascript on Android and iOS in your Flutter app. Call, Inject and Evaluate Javascript, Pass and Load HTML string to WebView, disable and clear the WebView cache and enable javascript. We will simply make a Browser App to display website to app.

SUBSCRIBE HERE

SUPPORT & SPONSOR ME

RESOURCES

TIMELINE
0:00 Introduction Local HTML, CSS, Javascript
0:24 Create WebView
0:53 Load Local HTML From String In WebView
2:37 Load Local HTML From Assets In WebView
3:56 Load HTML, CSS, Javascript
6:55 WebView Javascript Callback / WebView Pass Data With Javascript
7:47 Run Javascript In WebView / WebView EvaluateJavascript

SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS

*********

SOCIAL MEDIA: Follow Us :-)

LEARN MORE

PLAYLISTS

CREDITS

#Flutter #Tutorial #JohannesMilke

LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)

[roblesrt]

I was looking for examples of this. Thank you so much for sharing!

[khanisrarahmedalihusain]

Awesome Video, get to learn something new. Thank you so much.

[alexandredepril]

Thanks you so much, this is what i was looking for

[gauravjiu]

Thankyou very much for this useful tutorial

[harry_]

Can you tell me how to get a zip file from directory storage and then extract it to any directory folder?

[mortysmith]

please give us tutorial for installing js package like summernote, quill, etc.

[BB-fged]

Teacher I have a request for you...Can you upload a video about a simple reminder..User sets time and it sends local notification. I know you already made a video about local notification but this time its a reminder and make sure to save reminder so it doesn’t get lost. Again thank you teacher

[FaisalRamzan]

Thank you for this informative video. Just sent you the code access. Looking forward to hearing from you.

[aboutvic.]

when I try to evaluate javascript it throws an error and says cant find variable even though i defined the function in script.js

[codingsection]

I have been looking for a solution like this. thanks

[kocjkum]

webview_flutter_plus is no longer supported and very outdated. Any chance of getting an updated version of this using only webview_flutter? Thanks!

[TM-xphd]

Would this method work if we downloaded a zipped webapp with HTML, CSS and JS at runtime .... unzipped and tried to open the HTML file in the webview ?

[ItsMe-vyis]

Can you plz tell me how to copy a DB from internal storage to external storage in android using flutter

[aboutvic.]

when I try to implement this on IOS, the html doesnt take up the full width and height of the device. Is there a way to fix this. Thanks

[philipabakah]

Can the local html file have a local image ...because I say only a web image there...thanks

[codboxer]

when i use this to load an inline html code with js inside, it appear the error in run console

[INFO:CONSOLE(3)] "Uncaught (in promise) SecurityError: Failed to read the 'localStorage' property from 'Window': Storage is disabled inside 'data:' URLs.", source:

like this. how can i resolve this?

[magdevopsleonard]

how can i load local html file in web app. because web platform don't support webview please johannes.

[dhrubrawat]

How are you Mike? I hope you are fine.

[selingungor]

W/cr_AwContents(27776): WebView.destroy() called while WebView is still attached to window.
W/ContentCatcher(27776): Failed to notify a WebView
Restarted application in 1, 500ms.
D/EgretLoader(27776): EgretLoader(Context context)
D/EgretLoader(27776): The context is not activity
Hosting view in view hierarchy for platform view: 0
W/ContentCatcher(27776): Failed to notify a WebView why ?

[soran]

only html works, with youtube videos it doesn't work

import 'dart:convert';
import
import


class WebViewApp extends StatefulWidget {
const WebViewApp({Key? key}) : super(key: key);
@override
State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {

String htmlCodeString = '''
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load file or HTML string example</title>
</head>
<body>

<h1>Local demo page</h1>
<p>
This is an example page used to demonstrate how to load a local file or HTML
webview</a> plugin.
</p>

</body>
</html>
''';

late WebViewController controller;

void loadLocalHtml() async {

final url = Uri.dataFromString(
htmlCodeString,
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8')
).toString();

controller.loadUrl(url);

}


@override
Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView'),
),
body: WebView(
onWebViewCreated: (WebViewController controller) {
= controller;

},
),
);
}


}