Menu
I have a single HTML file that contains some JS functions and CSS styling.
Is it possible to load my html file into an embedded widget on Flutter Web? I've successfully accomplished this on iOS and Android using the flutter_webview pacakge, but haven't found a solution for Flutter Web.
568
There is a HTMLElementView widget which can help you embed Html in flutter web. This widget can take an Iframe and render it. If you don't prefer Iframe then you can embed simply a BodyElement from the dart:html library directly. An example of embedding Iframe is availabel here.
To display valid HTML you can set the src field to the following: _src = "data:text/html;charset=utf-8," + Uri. encodeComponent("HTML_CONTENT_HERE"); For the package you can also pass markdown to the src and it will convert it for you.
Flutter is growing with its libraries and community. Earlier, we could use Machine Learning and Flutter together to create powerful applications. Now, we can combine Flutter and HTML too.
How to render a local HTML file with flutter dart webview. To Read local html file we need rootBundle class. This class containf loadString() method which will takes path of html file. String fileHtmlContents = await rootBundle.
To load HTML file in flutter we will use webview widget. In this flutter webview example we will cover different ways of load html content in flutter. To work with html content we will use Webview pulgin with nullsafety webview_flutter We have different options to load data in webview.
The webViewController instance is also used to call javascript functions using evaluateJavascriptmethod. Here we are calling the ‘add’ function in the local html file which adds two numbers that are sent from Flutter and show in a p tag in the Webview.
You can conveniently add flutter_html and its latest version to the dependencies section in your pubspec.yaml file by performing the following command: 2. Then execute the command below: The package provides a widget named Html.
With the url_launcher plugin we can open URL in device browser in flutter Flutter provides a widget to help the developer when needs to interact with a specific app outside his/her own app and for that reason, the url launcher is available.
There is a HTMLElementView widget which can help you embed Html in flutter web. This widget can take an Iframe and render it. If you don't prefer Iframe then you can embed simply a BodyElement from the dart:html library directly.
An example of embedding Iframe is availabel here. Eventhough its from an old repo, the code is valid and I couldn't find a latest one.
If you don't want do go the tough way, there is simplified widget from Rodydavis which is available here called easy_web_view.
Still if you need code sample a create simple dart pad and share the MRE, I will try to help. :)
153
For the Iframe example, you can do something like this
First, import 'ui' library, and 'html' library.
import 'dart:ui' as ui;
import 'dart:html';
Second, register your 'Iframe' with viewType 'test-view-type' just for example.
ui.platformViewRegistry.registerViewFactory(
'test-view-type',
(int viewId) => IFrameElement()
..width = '640'
..height = '360'
..src = "https://www.youtube.com/embed/5VbAwhBBHsg"
..style.border = 'none');
Note: you will notice that the compiler can't find platformViewRegistry method but it's okay if you choose to Debug anyway and it will run correctly without any problems.
Finally, use HtmlElementView widget to run this Iframe
return Scaffold(
body: Column(
children: [
Text('Testing Iframe with Flutter'),
HtmlElementView(viewType: 'test-view-type'),
],
));
You can use this package flutter_widget_from_html
While defining the widget you need to set webView: true to get iFrame support
I just tested and it is working fine on web, and this package supports local assets too
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
