HTML Parsing in FLUTTER for Android / iOS Development

HTML Parsing in FLUTTER for Android / iOS Development

The HTML parser is the structured markup processing tool defining the HTML Parser class. It is often accessed to parse HTML files. Parsing is to resolve into component parts and then describe their syntactic roles.

In general, parsing analyzes the String of the symbols in computer or natural languages. When speaking about HTML parsing, it takes the HTML code and extracts the relevant information, such as the page’s title, headings, paragraphs, links, bold text, and much more.

Keep reading this article to learn much about HTML parsing in Flutter for android or iOS platforms! If you need professional assistance, do not hesitate to contact the reputable and trustworthy Flutter app development company.

Introduction to flutter HTML

Flutter is an open-source, cross-platform mobile app development framework. It is highly compatible with the present web rendering technologies such as HTML, JavaScript, and CSS.

Therefore, it is a perfect platform for web and mobile app development. With the help of Flutter developers, you can compile the existing code into the client experience, implant it into the browser and finally deploy it to any web server.

When you build the application with Flutter and need to render some HTML content, you can do it easily by accessing the plugin flutter_html. You can add flutter_html and its latest version to the dependencies section in pubspec.yaml file using the command “flutter pub add flutter_html.” Then, you have to use “flutter pub get” to execute the command.

How to do HTML parsing in Flutter

Android developers use the Jsoup library to parse HTML text and code. But, developers new to the flutter mobile app development do not know the existence of such a library to parse HTML text and code from the website in Flutter.

So, are you thinking about the right way to perform HTML parsing in Flutter for Android or iOS development? Well! Here are the two different solutions to meet your demands.

Solution: 1

You can now parse the HTML string in this way.

import ‘package:html/parser.dart’;

//here goes the function

String _parseHtmlString(String htmlString) {

var document = parse(htmlString);

String parsedString = parse(document.body.text).documentElement.text;

return parsedString;

}

Solution: 2

Next, you have to fetch data using http.get(url) to the user parser, and then you can parse whatever you want. Follow the below-mentioned code properly.

Fetch HTML page:

Future<string> fetchHTML(String url) async {

final response = await http.get(url);

if (response.statusCode == 200)

return response.body;

else throw Exception(‘Failed’);

}</string>

After that, you should call FutureBuilder()

FutureBuilder< String>(

future: fetchHTML(‘http://your_page.ru/page.html'),

builder: (context, snapshot){

if (snapshot.hasData) {

//Your downloaded page

_temp = snapshot.data;

print(snapshot.data);

return Text(‘Finished’);

}

else if (snapshot.hasError)

return Text(‘ERROR’);

return Text(‘LOADING’);

},

),

Now, you can parse it:

parse(_temp);

Other ways to parse HTML in Flutter

Method: 1

Are you accessing Flutter? Do you wish to parse HTML using parser.dart? If yes, then run the following code.

<div class=”weather-item now”>

<span class=”time”>Now</span>

<div class=”temp”>19.8<span>℃</span>

<small>(23℃)</small>

</div>

<table>

<tbody><tr>

<th><i class=”icon01" aria-label=”true”></i></th>

<td>93%</td>

</tr>

<tr>

<th><i class=”icon02" aria-label=”true”></i></th>

<td>south 2.2km/h</td>

</tr>

<tr>

<th><i class=”icon03" aria-label=”true”></i></th>

<td>-</td>

</tr>

</tbody></table>

</div>

You may have to use the following command to get this data.

import ‘package:html/parser dart’;

output:

19.8,23,93%,south 2.2km/h

Method: 2

Since you access the HTML package, you can obtain the desired data by accessing some HTML parsing and string processing whenever needed. Here is the dart sample where you can utilize the parse data function in your flutter application.

main.dart

import ‘package:html/parser.dart’ show parse;

main(List<string> args) {

parseData();

}

parseData(){

var document = parse(“””

<div class=”weather-item now”>

<span class=”time”>Now</span>

<div class=”temp”>19.8<span>℃</span>

<small>(23℃)</small>

</div>

<table>

<tbody><tr>

<th><i class=”icon01" aria-label=”true”></i></th>

<td>93%</td>

</tr>

<tr>

<th><i class=”icon02" aria-label=”true”></i></th>

<td>south 2.2km/h</td>

</tr>

<tr>

<th><i class=”icon03" aria-label=”true”></i></th>

<td>-</td>

</tr>

</tbody></table>

</div>

“””);

//declaring a list of String to hold all the data.

List<string> data = []

data.add(document.getElementsByClassName(“time”)[0].innerHtml);

//declaring a variable for temp since you use it in multiple places

var temp = document.getElementsByClassName(“temp”)[0];

data.add(temp.innerHtml.substring(0, temp.innerHtml.indexOf(“<span>”)));

data.add(temp.getElementsByTagName(“small”)[0].innerHtml.replaceAll(RegExp(“[(|)|℃]”), “”));

//You can also do document.getElementsByTagName(“td”) but it is more specific here.

var rows = document.getElementsByTagName(“table”)[0].getElementsByTagName(“td”);

//Map element to its innerHtml,

because were gonna need it.

//Iterate over the table-data and then store it safely in the data list

rows.map((e) => e.innerHtml).forEach((element) {

if(element != “-”){

data.add(element);

}

});

//print the data to console.

print(data);

}</span></string></string>

Output

Method 2 Output.jpg

How to parse HTML tags in Flutter

Do you need to parse HTML tags in your flutter project? Well! You can follow the steps mentioned here to meet your needs instantly.

At first, you should create the flutter application.

Then, you must add the required plugins in pubspec.yaml file as mentioned below.

dev_dependencies:

flutter_test:

sdk: Flutter

html: ^0.15.0

http: ^0.13.3

flutter_html: ^2.1.0

Now, you have to read the HTML file from the URL. Once you mention the site, it reads the data online. Use the http:package to read the data you have accessed and get the http class.

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

Now, you have HTML data fetched from the URL by accessing the HTTP package. So, it is the right time to parse the fetched content. You can use the below code to parse the HTML tags.

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)));

}

});

}

});

This code is written for fetching the data from the indexed tutorial page “chapters.” According to the URL you choose, you can change the index tag.

Finally, you can run the application successfully.

Conclusion

So, you will now be aware of the HTML parsing in Flutter for android/iOS development. If you do not get the desired result even after trying all the possible ways, you should seek professional assistance. Hire Flutter developer to get assistance in HTML parsing and complete your flutter project without hassle.