How can we parse HTML tags in Flutter
Last updated Jul 06, 2021In 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
![]() |
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 :
|
|
|
|
3858 Views |