Render Raw Html Code String In Webview Using Flutter App

Posted By Bajarangi soft , Posted On 12-10-2020

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.

Render Raw Html Code String In Webview Using Flutter App

Render Raw Html Code String In Webview
Step 1: We cannot directly remove the time stamp from Render Raw Html Code String In Webview but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code

dependencies:
  flutter:
    sdk: flutter
  flutter_webview_plugin: ^0.3.10+1

Step 2: After done saving the pubspec.yaml file, Open your flutter project root folder in Command Prompt or Terminal and execute flutter pub get command.

flutter pub get

Step 3: Open your project’s main.dart file and import material.dart and flutter_webview_plugin: ^0.3.10+1. dart package.

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

Complete Code For Render Raw Html Code String In Webview In Flutter
Main.dart

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(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Html()
        )
    );
  }
}

class Html extends StatefulWidget {
  LoadHtml createState() => LoadHtml();
}
class LoadHtml extends State<Html>{
  var HtmlCode = '<h1> H1 Lorem Ipsum</h1>' +
      '<h2> H2 Lorem Ipsum</h2>' +
      '<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.  </p>' +
      '<img src="https://flutter-examples.com/wp-content/uploads/2020/02/dice.jpg" alt="Image" width="250" height="150" border="3">' ;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
          title: Text('Render Raw HTML Code'
          )),
      body: WebviewScaffold(
        url: new Uri.dataFromString(HtmlCode, mimeType: 'text/html').toString(),
      ),
    );
  }
}