How can we parse HTML tags in Flutter

Last updated Jul 06, 2021

In one of my project there is requirement to parse html page and render it on the screen with edited html tags. I do lot of search on google and find a plugin to parse html tags in flutter on pub.dev package center, the plugin name is html: the version what i found while using this package is html: ^0.15.0 .

What we will cover in this post is

Read Html file from url

Parse html tags

Display updated html text on screen

 

 

So let's get started

Step 1: Create flutter application

Step 2: Add required plugins in pubspec.yaml file

dev_dependencies:
  flutter_test:
    sdk: flutter
  html: ^0.15.0
  http: ^0.13.3
  flutter_html: ^2.1.0

 

Step 3: Read html file from url

Here we have used a html file from the site tutorialspoint with a tutorial python

https://www.tutorialspoint.com/python/index.htm

 

Now to read data from online url we have used http: package

to read data we have used get method of http class

var response=await http.Client().get(Uri.parse(widget.url));

 

 

Parse Html Data

Now we have html data which are fetched from url by using http package. Its time to parse that fetched content. By using below code we have parsed the html tags

For example in the tutorial page we have index of the chapters. Now we need to fetch all index title and href tag url

The Index div contains class name as chapters, so we will read all index data by parsing like below

var chapters = document.getElementsByClassName("chapters");
chapters.forEach((element) {
  var inner = element.innerHtml.toString();
  if (inner.contains("href")) {
    parse(inner).getElementsByTagName("li").forEach((element) {
      var list = element.innerHtml;

      if (list.contains("href")) {
        //  indexlist_local.add(list.substring(list.indexOf("href=")+6,list.indexOf(">")-1));
        indexlist_local.add(IndexContent(title: element.text,
            path: list.substring(
                list.indexOf("href=") + 6, list.indexOf(">") - 1)));
      }
    });
  }
});

 

Render Edited Html data on the screen

We have all edited html text, now we will show all index data in listview and its chapter content onscreen. Read How to load Html data in flutter using html_flutter plugin to load html data .

 

Step 4: Run application

Parse HTMl text in flutter using html plugin

 

 

Complete file

import 'package:flutter/material.dart';
import 'package:html/parser.dart' show parse;
import 'package:http/http.dart' as http;
import 'package:flutter_html/flutter_html.dart';

class Tutorial extends StatefulWidget{
  String title;
  String url;
  String path;

  Tutorial({required this.title,required this.url,required this.path});

  @override
  State<StatefulWidget> createState() {

    return TutorialState();
  }

}

class TutorialState extends State<Tutorial>{
  GlobalKey<ScaffoldState>_scaffoldkey=GlobalKey();
String data="";
bool isLoading=true;
List<IndexContent> listindex=List.empty(growable: true);
  @override
  void initState() {
    super.initState();
    readContent();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldkey,
      appBar: AppBar(leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
              icon: const Icon(Icons.arrow_back),
              onPressed: () { Navigator.pop(context); },

            );
          }
      ),title:Text( widget.title),automaticallyImplyLeading: true,),
      endDrawer: Drawer(


          child: Container(
            color: Colors.grey[300],
            child: Padding(
              padding: const EdgeInsets.only(top:32.0),
              child: ListView.builder(

                itemBuilder: (context,index){
                  return Column(
                    children: [
                      (index==0)?Text("Index",style: TextStyle(fontSize: 20),):Divider(
                        height: 1,
                        color: Colors.red,
                      ),
                      ListTile(
                        title: Text(listindex[index].title),onTap: (){
                        _scaffoldkey.currentState!.openDrawer();
                        setState(() {
                          widget.url=widget.path+listindex[index].path;
                          isLoading=true;
                          readContent();
                        });

                      },)
                    ],
                  );
                },itemCount: listindex.length,),
            ),
          )// Populate the Drawer in the next step.
      ),

      body: Container(
            child: (isLoading)?Center(child: CircularProgressIndicator(),):SingleChildScrollView(
              child: Html(
                  shrinkWrap:true,
              data: data,
              onLinkTap: (URL,CONTEX,MAP,ELEMENT){
                      print("OnLink Tap $URL");
                      print("OnLink Tap $CONTEX");
                      print("OnLink Tap ${ELEMENT!.innerHtml}");
                      print("OnLink Tap ${MAP['href']}");
                      MAP.keys.forEach((element) {
                        print("OnLink Tap element $element");
                      });
              },
              style: {
                ".google-bottom-ads":Style(display: Display.NONE),
                "#google-top-ads":Style(display: Display.NONE),
                "#bottom_navigation":Style(display: Display.NONE),
                ".button-borders":Style(display: Display.NONE),
                "table": Style(

                  backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
                )
              }
      ),
            )),
    );
  }

  readContent()async
  {
    isLoading=true;
    var response=await http.Client().get(Uri.parse(widget.url));
    List<IndexContent> indexlist_local=List.empty(growable: true);
    if(response.statusCode==200)
    {
      var document=parse(response.body);

      if(listindex.isEmpty) {
        var chapters = document.getElementsByClassName("chapters");
        chapters.forEach((element) {
          var inner = element.innerHtml.toString();
          if (inner.contains("href")) {
            parse(inner).getElementsByTagName("li").forEach((element) {
              var list = element.innerHtml;

              if (list.contains("href")) {
                //  indexlist_local.add(list.substring(list.indexOf("href=")+6,list.indexOf(">")-1));
                indexlist_local.add(IndexContent(title: element.text,
                    path: list.substring(
                        list.indexOf("href=") + 6, list.indexOf(">") - 1)));
              }
            });
          }
        });
      }

      var tutorial_content= document.getElementsByClassName("mui-col-md-6 tutorial-content");
      tutorial_content.forEach((element) {
        var inner=element.text.toString();
        //  inner=  inner.replaceAll(" ", "");
        inner=   inner.replaceAll("PDF Version", "");
        inner=  inner.replaceAll("Quick Guide", "");
        inner=  inner.replaceAll("Resources", "");
        inner=  inner.replaceAll("Job Search", "");
        inner=  inner.replaceAll("Discussion", "");
        setState(() {
          isLoading=false;
          if(listindex.isEmpty)
          listindex=indexlist_local;
          data=element.innerHtml;

        });
        print(inner);



      });

    }
  }

}
class IndexContent
{
  String title;
  String path;
  IndexContent({required this.title,required this. path});
}

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

3505 Views