How to render html tags with Flutter

Today, you’ll learn how to render HTML tags as Flutter widgets. With this you can display a complete block of HTML code and it’ll effect exactly like it would on a web page.

Let’s get started.

First, pull this package from pub: flutter_html

Now, create a new dart file. Paste this code. Remember to change the HTML part to whatever suites you.

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

class RenderHtml extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Render HTML example')),
      body: Center(
        child: SingleChildScrollView(
          child: Html(padding: EdgeInsets.all(12.0), data: """
              <div> 
                <h1>Inducesmile.com</h1>
                <hr>
                <p> 
                  We provide <u>exclusive</u> content for programming <b>mobile apps</b>:
                  <ul>
                    <li>Android Tutorials</li>
                    <li>Flutter Tutorials</li>
                    <li>React Native Tutorials</li>
                  </ul>
                </p>

              </div>
            """),
        ),
      ),
    );
  }
}

In your main.dart file, paste this:

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Code Snippets',
      theme: new ThemeData(primarySwatch: Colors.red),
      home: new RenderHtml();
}
}

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

50% Discounts On Projects

Do you have a custom project with a clear requirements, we are currently giving a 50% discount on all projects.

We will work with you to ensure we deliver what you need.

If you have questions or want to chat with us, you can reach us on Skype (henry.tochi)

Languages and technologies we use - Java, Kotlin, Laravel, Vue, React, Flutter, Swift and more.