Flutter WebViewWidget Render Inline HTML Code with CSS

In today's tutorial we will write our own inline HTML code including inline CSS in String format. We will store all the HTML code to a single String variable. Now we will call HTML code variable into WebView Widget with Uri.dataFromString() function which converts all the String into HTML format.

Flutter WebView Widget Render Inline HTML Code with CSS

1. First of all we will install WebView Widget in our flutter project. I have already make a tutorial on WebView Widget Installation Guide. You can visit the tutorial from HERE.

2. Import material.dart and webview_flutter.dart in your main.dart file.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

3. Creating a variable htmlCode and define all the Inline HTML.

  final htmlCode = """<div>
  <h1 style="font-size:10vw;" >This is Heading H1</h1>
  <h2 style="font-size:10vw;" >This is Heading H2</h2>
  <h3 style="font-size:10vw;">This is Heading H3</h3>
  <p style="font-size:5vw;" >Sample Paragraph Text.</p>
  <p style="font-size:5vw;" >Sample Paragraph Text.</p>
  <div>
    <h1 style="font-size:10vw;">Heading Tag Inside DIV</h1>
    <p style="font-size:5vw;"><strong>Bold Text</strong> in HTML.</p>
    <p style="color: red">Below is List View in HTML</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <p style="font-size:5vw;">Img tag in HTML for Showing Image</p>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYNSWovS91U5EyeIG-SILt_votSAbPM8ZfFubEZC_Wb-zCL5a9YP-qigWiJs3Bjle45KwIEc_Jhxb9HA_UzH0WLAtaRXKiPRrUrlIURgwfIoex4qfcEed839tE3aLl2yBrK1uHNCyGjdkEM6oEUUCyhYmMEhuuCYlhj_FHBdG8hr97otfM_GGKriiF6qxA/s16000/flutter-app.png' />
  </div>
  </div>""";

4. Creating WebViewWidget controller.

   dynamic controller;

5. Defining initState() inbuilt method and here we will define all the WebViewWidget controller properties including HTML code variable.

  @override
  void initState() {
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Colors.white)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onWebResourceError: (WebResourceError error) {},
        ),
      )
      ..loadRequest(Uri.dataFromString(htmlCode, mimeType: 'text/html'));
    super.initState();
  }

6. Creating WebViewWidget.

WebViewWidget(controller: controller)

Screenshot:

Source code for main.dart file:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: MyApp()));
  }
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
 final htmlCode = """<div>
  <h1 style="font-size:10vw;" >This is Heading H1</h1>
  <h2 style="font-size:10vw;" >This is Heading H2</h2>
  <h3 style="font-size:10vw;">This is Heading H3</h3>
  <p style="font-size:5vw;" >Sample Paragraph Text.</p>
  <p style="font-size:5vw;" >Sample Paragraph Text.</p>
  <div>
    <h1 style="font-size:10vw;">Heading Tag Inside DIV</h1>
    <p style="font-size:5vw;"><strong>Bold Text</strong> in HTML.</p>
    <p style="color: red">Below is List View in HTML</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <p style="font-size:5vw;">Img tag in HTML for Showing Image</p>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYNSWovS91U5EyeIG-SILt_votSAbPM8ZfFubEZC_Wb-zCL5a9YP-qigWiJs3Bjle45KwIEc_Jhxb9HA_UzH0WLAtaRXKiPRrUrlIURgwfIoex4qfcEed839tE3aLl2yBrK1uHNCyGjdkEM6oEUUCyhYmMEhuuCYlhj_FHBdG8hr97otfM_GGKriiF6qxA/s16000/flutter-app.png' />
  </div>
  </div>""";

  dynamic controller;

  @override
  void initState() {
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Colors.white)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onWebResourceError: (WebResourceError error) {},
        ),
      )
      ..loadRequest(Uri.dataFromString(htmlCode, mimeType: 'text/html'));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(child: WebViewWidget(controller: controller));
  }
}