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.