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 Step 3: Read html file from url Here we have used a html file from the site tutorialspoint with a tutorial python Now to read data from online url we have used http: package to read data we have used get method of http class 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 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
dev_dependencies:
flutter_test:
sdk: flutter
html: ^0.15.0
http: ^0.13.3
flutter_html: ^2.1.0
https://www.tutorialspoint.com/python/index.htm
var response=await http.Client().get(Uri.parse(widget.url));
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)));
}
});
}
});
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 :
|
|
|
|
|
3366 Views |
|