Flutter — Render HTML

flutter

Hello,

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code used by developers and organizations around the world for free and is open source.

In this story I am going to explain you “How to render HTML in the Flutter ?”

Flutter has no default support for Web-view :

So, here we learn how it can be done,

First Create a new flutter application you can use any command line utility, I am using Intellij IDE.

We can achieve this in two ways:

Solution 1:

Add the following dependency in pubspec.ymal

dependencies:
  flutter_html_view: "^0.3.1"

import the library in main.dart file

import 'package:flutter_html_view/flutter_html_view.dart';

Now add this code to your Widget

new HtmlView(data: html)

This will be our main code

@override
Widget build(BuildContext context) {

  String html = '<h1>This is heading 1</h1> <h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6><p><img alt="Test Image" src="https://i.ytimg.com/vi/RHLknisJ-Sg/maxresdefault.jpg" /></p>';

  return new MaterialApp(
    home: new Scaffold(
      appBar: new AppBar(
        title: new Text('Plugin example app'),
      ),
      body: new SingleChildScrollView(
        child: new Center(
          child: new HtmlView(data: html),
        ),
      ),
    ),
  );
}

Solution 1 Output

Solution 2:

Here we convert our html to markdown, then render the markdown in flutter app.

Let’s start,

First things first

Add the following dependency in pubspec.ymal

dependencies
  html2md: "^0.1.5"
  flutter_markdown: "^0.1.5"

import the library in main.dart file

import 'package:html2md/html2md.dart' as html2md;
import 'package:flutter_markdown/flutter_markdown.dart';

Now convert HTML string to Markdown

// html String
static String html = '<h1>This is heading 1</h1> <h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6><img alt="Test Image" src="https://i.ytimg.com/vi/RHLknisJ-Sg/maxresdefault.jpg" /><p>This paragraph contains a lot of lines in the source code, but the browser ignores it.</p>';
// Convert html to Markdown
String markdown = html2md.convert(html);

Here is our Markdown renderer

new Markdown(
  data: markdown,
)
or
// you can this if you need scrolling in the view
new MarkdownBody(
  data: markdown,
)

This is Final Widget builder code

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text(widget.title),
    ),
    body: new Center(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new MarkdownBody(
            data: markdown,
          )
        ],
      ),
    ),
  );
}

Solution 2 Output

Thanks for your time.

Hope it helps you, post questions if any.

Hey don’t forget to clap & share :).