So I have a project here that displays large amounts of images and videos, the problem is that when the user is scrolling and a video is playing at the same time, it really ruins the performance of the entire app and the FPS drops from 60 to around 30. I think the way of fixing this is just pausing the video while the user is scrolling. How could I go about getting it to do this?
I'm using this plugin for the video: https://pub.dev/packages/video_player
This is the parent component, with the video widget inside it, so as you can see, it just loops through an array and displays pictures and images. What I want to know is: how to let the video widget know whether the user is scrolling or not, and inside of the video widget there is a pause and play method, so depending on whether the user is scrolling or not, it will pause/play
(FeedVideoItem = video widget)
Parent Widget:
@override
Widget build(BuildContext context) {
return SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
if (loaded)
if (_feedDatas.length > 1)
for (var item in _feedDatas)
if (item.isImage)
FeedImageItem(
item: item,
)
else
// VIDEO WIDGET
new FeedVideoItem(videoData: item)
else
Center(child: Text('Loading, do hot restart to display')),
],
),
),
);
}
Video Widget (FeedVideoItem):
class FeedVideoItem extends StatefulWidget {
final videoData;
FeedVideoItem({this.videoData}) : super();
@override
_FeedVideoItemState createState() => _FeedVideoItemState(videoData);
}
class _FeedVideoItemState extends State<FeedVideoItem> {
FeedItem item;
_FeedVideoItemState(this.item);
VideoPlayerController _controller;
bool startedPlaying = false;
Future<void> initialiseVideoPlayerFuture;
@override
void initState() {
_controller = VideoPlayerController.network(item.url);
initialiseVideoPlayerFuture = _controller.initialize();
_controller.setLooping(true);
_controller.setVolume(1.0);
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 15.0),
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
FutureBuilder(
future: initialiseVideoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return InkWell(
onTap: () {
setState(() {
if (_controller.value.isPlaying) {
_controller.pause();
} else {
_controller.play();
}
});
},
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
),
);
} else {
//TODO: Add placeholder image
}
},
),
InkWell(
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
color: Colors.white,
),
)
],
),
],
),
);
}
}