Flutter, fetching specfic image from website - html

Question

I'm learning flutter and want to fetch various images which are the thumbnail of the cartoon. I used HTTP library and fetched response data.
But, how can I extract that image?
Website: https://comic.naver.com/webtoon/weekdayList.nhn?week=
Future<http.Response> _getData() async {
return await http.get('https://comic.naver.com/webtoon/weekdayList.nhn?week=');
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
),
body: Center(
child: RaisedButton(
child: Text("Fetching"),
onPressed: (){
_getData().then((response){
//dom.Document document = parser.parse(response.body);
print(response.body);
}).catchError((e) => print(e));
},
),
),
);
}
What I want to do is below.
Fetching web page as HTML code
Find image url of each cartoon
Fetch that image

Answer 1

Here you have a basic example, after you press the top-right button, you will get the images in a ListView:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:html/parser.dart' as parser;
import 'package:html/dom.dart' as dom;
...create your StatefulWidget
class ParsingWidgetState extends State<ParsingWidget> {
List<String> list = List();
void _getData() async {
final response =
await http.get('https://comic.naver.com/webtoon/weekdayList.nhn?week=');
dom.Document document = parser.parse(response.body);
final elements = document.getElementsByClassName('thumb');
setState(() {
list = elements
.map((element) =>
element.getElementsByTagName("img")[0].attributes['src'])
.toList();
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
actions: <Widget>[
IconButton(
icon: Icon(Icons.refresh),
onPressed: () {
_getData();
},
),
],
),
body: ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) {
return Image.network(
list[index],
height: 200.0,
);
},
));
}
}
Try using FutureBuilder instead setState, this is just a working sample.
More info:
https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html
https://flutter-academy.com/async-in-flutter-futurebuilder/