How to get Video Thumbnails from api link? - flutter

Question

I want to display list of videos with thumbnails from api.
Here is the api response as below.
{
"success": 1,
"video": [
{
"video_id": "609cb28a0760c",
"url": "https://www.youtube.com/watch?v=EvvHNtlz20Q&list=RDEvvHNtlz20Q&start_radio=1",
"search_by": "",
"topic_id": "609cb1dce30aa",
"chapter_id": "609cb13f497e3",
"subject_id": "5e32874c714fa",
"medium_id": "5d15938aa1344",
"standard_id": "5d1594e283e1a",
"topic_name": "test topic",
"active": "1"
}
]
}
From above response i created Model Class as below in videomodel.dart file.
// To parse this JSON data, do
//
// final videoModel = videoModelFromJson(jsonString);
import 'dart:convert';
VideoModel videoModelFromJson(String str) =>
VideoModel.fromJson(json.decode(str));
String videoModelToJson(VideoModel data) => json.encode(data.toJson());
class VideoModel {
VideoModel({
required this.success,
required this.video,
});
int success;
List<Video> video;
factory VideoModel.fromJson(Map<String, dynamic> json) => VideoModel(
success: json["success"],
video: List<Video>.from(json["video"].map((x) => Video.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"success": success,
"video": List<dynamic>.from(video.map((x) => x.toJson())),
};
}
class Video {
Video({
required this.videoId,
required this.url,
required this.searchBy,
required this.topicId,
required this.chapterId,
required this.subjectId,
required this.mediumId,
required this.standardId,
required this.topicName,
required this.active,
});
String videoId;
String url;
String searchBy;
String topicId;
String chapterId;
String subjectId;
String mediumId;
String standardId;
String topicName;
String active;
factory Video.fromJson(Map<String, dynamic> json) => Video(
videoId: json["video_id"],
url: json["url"],
searchBy: json["search_by"],
topicId: json["topic_id"],
chapterId: json["chapter_id"],
subjectId: json["subject_id"],
mediumId: json["medium_id"],
standardId: json["standard_id"],
topicName: json["topic_name"],
active: json["active"],
);
Map<String, dynamic> toJson() => {
"video_id": videoId,
"url": url,
"search_by": searchBy,
"topic_id": topicId,
"chapter_id": chapterId,
"subject_id": subjectId,
"medium_id": mediumId,
"standard_id": standardId,
"topic_name": topicName,
"active": active,
};
}
Here is the Function i created in apimanager.dart file.
Future<List<Video>> getVideo() async {
final videoUrl =
"$baseUrl/videos/get_by_standard_medium_subject_chapter_id?subject_id=5e32874c714fa&medium_id=5d15938aa1344&standard_id=5d1594e283e1a&chapter_id=609cb13f497e3";
final response = await http.get(Uri.parse(videoUrl));
if (response.statusCode == 200) {
final videoData = videoModelFromJson(response.body);
final List<Video> videos = videoData.video;
return videos;
} else {
return <Video>[];
}
}
And last is view code as below in video_widget.dart file.
class _VideoWidgetState extends State<VideoWidget> {
var _videos = <Video>[];
late bool _loading;
#override
void initState() {
super.initState();
_loading = true;
ApiManager().getVideo().then((videos) {
setState(() {
_videos = videos;
_loading = false;
});
});
}
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: null == _videos ? 0 : _videos.length,
//itemCount: _subjects.length,
itemBuilder: (context, index) {
Video video = _videos[index];
});
}
}
So how can i display the list of videos with the thumbnails?

Answer 1

Simply using YoutubeVideoController I solved the problem.
ListView.builder(
itemCount: null == _videos ? 0 : _videos.length,
itemBuilder: (context, index) {
Video video = _videos[index];
var url = video.url;
YoutubePlayerController _controller = YoutubePlayerController(
initialVideoId: YoutubePlayer.getThumbnail(videoId: url),
flags: YoutubePlayerFlags(
autoPlay: false,
mute: false,
disableDragSeek: false,
loop: false,
isLive: false,
forceHD: false,
),
);
return YoutubePlayer(
controller: _controller,
);
},
),