Flutter Render Raw HTML Code String in WebView Example Tutorial

Raw HTML code is used in .html extension files. We can easily call HTML files in our flutter’s official webView widget but they don’t support Raw HTML code yet. To use use Raw html code in flutter iOS and android app’s we have to use flutter_webview_plugin. Guys this plugin is completely free for every flutter developer and can be easily used in existing flutter projects. Using this plugin we can easily process Raw HTML code into Web Page format. So in this tutorial we would learn about Flutter Render Raw HTML Code String in WebView iOS Android Example Tutorial.

Contents in this project Flutter Render Raw HTML Code String in WebView iOS Android Example Tutorial:

1. Before getting started using the plugin we have to download and install flutter_webview_plugin in our current flutter project. So open your project’s pubspec.yaml in any code editor. I am using Visual Studio Code Editor.

2. Find dependencies line and put flutter_webview_plugin: ^0.3.10+1 just after it.

Complete Source Code for my pubspec.yaml file after adding above plugin:

3. Now next step is to install the WebView plugin. So open your flutter project Root directory in Command Prompt in windows and Terminal in MAC and execute flutter pub get command. The Pub get command will automatically download and install the newly added plugin in flutter project.

4. Now open your flutter project’s main.dart file and import material.dart and flutter_webview_plugin.dart package.

5. Create void main runApp() method and here we would call our main MyApp class.

6. Create our main MyApp extends StatelessWidget. We would call Html() class here.

7. Create a class named as Html extends StatefulWidget. In this class we would make createState() method of state and pass LoadHtml class name with it.

8. Create a class named as LoadHtml extends State.

9. Create a variable named as HtmlCode and assign some Raw HTML code to it. We would parse this HTML code in WebView. One more thing if you change the line then make sure put Plus + symbol to connect both codes like i did in below code.

10. Creating Widget Build area and define WebviewScaffold widget here. We would call the HtmlCode variable here in url property.

11. Complete source code for main.dart file:

Screenshot:

Flutter Render Raw HTML Code String in WebView Example Tutorial

Leave a Reply

Your email address will not be published.