This is part 4 of my tutorial series Build Android Application using Flutter and WordPress API. If you didn’t read previous parts please check them before you continue reading further.

How to render HTML in your Flutter application?

You guys remember WebView in Android don’t you? It’s hard to find Android developer who never used it, well I guess it’s almost impossible. Not so many sites had API before so using WebView was the fastest way to build application around some web site. It wasn’t really elegant, cleanest or the best solution but it worked and it was fast to implement though hard to maintain. I could keep talking about pros and cons of WebView for a long time but that is’t subject of this tutorial. Most of WordPress API responses contain HTML tags and in the part 3 of this tutorial we used some tricks to filter them out and replace them with blank space. Anyway I received many emails from people asking me Is it possible to render HTML in Flutter?

Where is WebView ?

Flutter doesn’t support WebView so forget about using it to solve this problem. Anyway there is package flutter_html_view by Karthik Ponnam which easily solves this. Let’s add it to our project. Open your pubspec.yaml file and add dependency:

  flutter_html_view: ^0.5.8

Run Packages get to fetch package files. Open virtuoozapost.dart file and import flutter_html_view.

import 'package:flutter_html_view/flutter_html_view.dart';

As we already saw in previous parts of this tutorial WordPress API returns post content with HTML tags included. Now we can use flutter_html_view package to render this response as HTML.

  new HtmlView(data: post['content']['rendered'])

Start your application in emulator or on your mobile and check the results. You should see post content rendered as HTML with all h1, h2 and other tags rendered and text formatted. Please check full code bellow.

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
import 'package:flutter_html_view/flutter_html_view.dart';

class VirtuoozaPost extends StatelessWidget {

  var post;
  VirtuoozaPost({Key key, @required var}) : super(key: key);

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(post['title']['rendered']),
      body: new Padding(
        padding: EdgeInsets.all(16.0),
        child: new ListView(
          children: [
            new FadeInImage.memoryNetwork(
              placeholder: kTransparentImage,
              image: post["featured_media"] == 0
                  ? 'images/placeholder.png'
                  : post["_embedded"]["wp:featuredmedia"][0]["source_url"],
            new HtmlView(data: post['content']['rendered'])

Share with your friends