Flutter GridView in TabBar causing lag because of my code - flutter

Question

There is a GridView in my TabBar which has two tabs and this tab is the 2nd one which is causing some UI lag. When I fetched some image in the GridView, I didn't experience any lag so I think I've done something wrong in my code which involves Futures which is loading videos from the internal storage directory. Also I have read about HandlerThread that it can help with the issue but I don't know how to implement it.
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:thumbnails/thumbnails.dart';
import 'package:wastatusapp/utils/video_play.dart';
final Directory _videoDir =
Directory('/storage/emulated/0/WhatsApp/Media/.Statuses');
class VideoScreen extends StatefulWidget {
const VideoScreen({Key key}) : super(key: key);
#override
VideoScreenState createState() => VideoScreenState();
}
class VideoScreenState extends State<VideoScreen> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
if (!Directory('${_videoDir.path}').existsSync()) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'Install WhatsApp\n',
style: TextStyle(fontSize: 18.0),
),
const Text(
"Your Friend's Status Will Be Available Here",
style: TextStyle(fontSize: 18.0),
),
],
);
} else {
return VideoGrid(directory: _videoDir);
}
}
}
class VideoGrid extends StatefulWidget {
final Directory directory;
const VideoGrid({Key key, this.directory}) : super(key: key);
#override
_VideoGridState createState() => _VideoGridState();
}
class _VideoGridState extends State<VideoGrid> {
Future<String> _getImage(videoPathUrl) async {
//await Future.delayed(Duration(milliseconds: 500));
final thumb = await Thumbnails.getThumbnail(
videoFile: videoPathUrl,
imageType:
ThumbFormat.PNG, //this image will store in created folderpath
quality: 10);
return thumb;
}
#override
Widget build(BuildContext context) {
final videoList = widget.directory
.listSync()
.map((item) => item.path)
.where((item) => item.endsWith('.mp4'))
.toList(growable: false);
if (videoList != null) {
if (videoList.length > 0) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
child: GridView.builder(
itemCount: videoList.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.7,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8,
),
itemBuilder: (context, index) {
return InkWell(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PlayStatus(
videoFile: videoList[index],
),
),
),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(12)),
child: Container(
child: FutureBuilder(
future: _getImage(videoList[index]),
builder: (context, snapshot) {
if (snapshot.connectionState ==
ConnectionState.done) {
if (snapshot.hasData) {
return Hero(
tag: videoList[index],
child: Image.file(
File(snapshot.data),
fit: BoxFit.cover,
),
);
} else {
return Center(
child: Column(
children: [
Text(
"Open WhatsApp with your internet on and then try again."),
Text(
"Make sure you have good internet connection!")
],
),
);
}
} else {
return Container(
child:
Image.asset('assets/images/video_loader.gif'),
);
}
}),
//new cod
),
),
);
},
),
);
} else {
return const Center(
child: Text(
'Sorry, No Videos Found.',
style: TextStyle(fontSize: 18.0),
),
);
}
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
}
}