BUILD ANDROID APPLICATION USING FLUTTER AND WORDPRESS API PART 4

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:

pubspec.yaml
  flutter_html_view: ^0.5.8

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

virtuoozapost.dart
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.

virtuoozapost.dart
  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.

virtuoozapost.dart
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 this.post}) : super(key: key);

  @override
  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