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.
|
1 2 3 4 |
dev_dependencies: flutter_webview_plugin: ^0.3.10+1 flutter_test: sdk: flutter |
Complete Source Code for my pubspec.yaml file after adding above plugin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
name: project description: A new Flutter project. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 dev_dependencies: flutter_webview_plugin: ^0.3.10+1 flutter_test: sdk: flutter # For information on the generic Dart part of this file, see the # following page: https://dart.dev/tools/pub/pubspec # The following section is specific to Flutter. flutter: assets: - assets/TestPage.html # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true |
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.
|
1 2 |
import 'package:flutter/material.dart'; import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; |
5. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
6. Create our main MyApp extends StatelessWidget. We would call Html() class here.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Html() ) ); } } |
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.
|
1 2 3 4 5 |
class Html extends StatefulWidget { LoadHtml createState() => LoadHtml(); } |
8. Create a class named as LoadHtml extends State.
|
1 2 3 4 5 |
class LoadHtml extends State<Html>{ } |
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.
|
1 2 3 4 |
var HtmlCode = '<h1> h1 Heading Tag</h1>' + '<h2> h2 Heading Tag </h2>' + '<p> Sample Paragraph Tag </p>' + '<img src="https://flutter-examples.com/wp-content/uploads/2019/04/install_thumb.png" alt="Image" width="250" height="150" border="3">' ; |
10. Creating Widget Build area and define WebviewScaffold widget here. We would call the HtmlCode variable here in url property.
|
1 2 3 4 5 6 7 8 |
Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Render Raw HTML Code in Flutter')), body: WebviewScaffold( url: new Uri.dataFromString(HtmlCode, mimeType: 'text/html').toString(), ), ); } |
11. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import 'package:flutter/material.dart'; import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Html() ) ); } } class Html extends StatefulWidget { LoadHtml createState() => LoadHtml(); } class LoadHtml extends State<Html>{ var HtmlCode = '<h1> h1 Heading Tag</h1>' + '<h2> h2 Heading Tag </h2>' + '<p> Sample Paragraph Tag </p>' + '<img src="https://flutter-examples.com/wp-content/uploads/2019/04/install_thumb.png" alt="Image" width="250" height="150" border="3">' ; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Render Raw HTML Code in Flutter')), body: WebviewScaffold( url: new Uri.dataFromString(HtmlCode, mimeType: 'text/html').toString(), ), ); } } |
Screenshot:
