Flutter Html Code Example | Flutter Html Package

Dependencies:

flutter_html: ^2.1.2

Flutter HTML Code Example:

You can design a flutter app with HTML tags. H1 to H6 Tag, HTML Table, Link, bold, Strong, Highlight, iframe, some CSS style in this tutorial.

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

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  static const htmlData = """""" 
  <h1 id='top'>Heading one</h1>
  <h2Heading Two</h2>
  <h3>Heading Three</h3>
  <h4>Heading Four</h4>
  <h5>Heading Five</h5>
  <h6>Heading Six</h6>
  
  <p>This is paragraph</p>
  <b>This is Bold Text</b> 
  <br>
  <strong>This is Strong Text </strong>
  <br>
  <i>This is italic text</i>
  <br>
  <mark>This is Mark</mark>
  <br>
  <ol>
  <li>List one</li>
  <li>List Two</li>
  <li>List Three</li>
  <li>List Four</li>
  </ol>
  <ul>
  <li>List one</li>
  <li>List Two</li>
  <li>List Three</li>
  <li>List Four</li>
  </ul>
  <a href='https://www.insturctivetech.com'>This is link</a>
  <iframe height='300' width='400' src='https://www.instructivetech.com/'></iframe>
  <pre>
  <code>
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test App'),
      ),
      body: SingleChildScrollView(
          child: Html(
        data: htmlData,
        style: {
          ""h1"": Style(
              color: Colors.red,
              textAlign: TextAlign.center,
              backgroundColor: Colors.black,
              padding: EdgeInsets.all(15),
              margin: EdgeInsets.all(10),
          
          ),
          ""h2"": Style(color: Colors.yellow),
          ""h3"": Style(color: Colors.green),
          ""h4"": Style(color: Colors.orange),
          ""h5"": Style(color: Colors.indigoAccent),
          ""h6"": Style(color: Colors.amber),
        },
      )),
    );
  }
  </code>
  </pre>
  <a href='#top'>TOP</a>
  
  <style>
  tr {
      border: 2px solid white;
      padding: 8px;
      background-color: gray;
  }
 
  </style>
 <h2>HTML TABLE with css style Flutter</h2>
<table>
<tr>
    <th>Id</th>
    <th>Name</th>
    <th>Age</th>
</tr>
<tr>
     <td>0001</td>
     <td>Anis</td>
     <td>21</td>
</tr>
<tr>
     <td>0002</td>
     <td>Anim</td>
     <td>20</td>
</tr>
<tr>
     <td>0003</td>
     <td>Anamul</td>
     <td>15</td>
</tr>
<tr>
     <td>0004</td>
     <td>Anim</td>
     <td>16</td>
</tr>
</table>
 <br>
 <img src=""https://cdn.pixabay.com/photo/2015/07/02/10/48/arctic-hare-828994_960_720.jpg"" width='300' height='500' > 
<p> X<sup>2</sup>+2ab+b<sup>2</sup></p>
<br>
<p>X<sub>2</sub></p>
<svg width='200' height='200'>
<circle cx=""100"" cy='100' r=""50"" stroke='orange' stroke-width='25' fill='gray'></circle>
</svg>
<br>
<svg width='200' height='200'>
<rect width='100' height='100' fill='red'/>
</svg>


  """""";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test App'),
      ),
      body: SingleChildScrollView(
          child: Html(
        data: htmlData,
        style: {
          ""h1"": Style(
              color: Colors.red,
              textAlign: TextAlign.center,
              backgroundColor: Colors.black,
              padding: EdgeInsets.all(15),
              margin: EdgeInsets.all(10),
          
          ),
          ""h2"": Style(color: Colors.black),
          ""h3"": Style(color: Colors.green),
          ""h4"": Style(color: Colors.orange),
          ""h5"": Style(color: Colors.indigoAccent),
          ""h6"": Style(color: Colors.amber),
          ""a"": Style(color: Colors.blue,fontSize: FontSize.em(2), ),
        },
      )),
    );
  }
}