Jerky video playing in my Flutter app for Windows - flutter

Question

In my Flutter project for Windows, I want to be able to read locally at least 4 videos simultaneously (up to 1920 x 1080, up to 60 fps).
The videos can be of different formats (mp4, wmv, ...), different sizes and different framerates.
Using dart_vlc, I created a test project with 4 video players:
void main()
{
DartVLC.initialize();
runApp(const DartVLCExample());
}
class DartVLCExample extends StatelessWidget
{
const DartVLCExample({Key? key}) : super(key: key);
#override
Widget build(BuildContext context)
{
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('package:dart_vlc'),
centerTitle: true,
),
body: const PrimaryScreen(),
),
);
}
}
class PrimaryScreen extends StatelessWidget
{
const PrimaryScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context)
{
return Row(
children: const [
Expanded(child: VideoPlayer(index: 1)),
Expanded(child: VideoPlayer(index: 2)),
Expanded(child: VideoPlayer(index: 3)),
Expanded(child: VideoPlayer(index: 4)),
],
);
}
}
class VideoPlayer extends StatefulWidget
{
final int index;
const VideoPlayer({
super.key,
required this.index,
});
#override
VideoPlayerState createState() => VideoPlayerState();
}
class VideoPlayerState extends State<VideoPlayer>
{
late Player player;
MediaType mediaType = MediaType.file;
CurrentState current = CurrentState();
PositionState position = PositionState();
PlaybackState playback = PlaybackState();
GeneralState general = GeneralState();
VideoDimensions videoDimensions = const VideoDimensions(0, 0);
List<Media> medias = <Media>[];
List<Device> devices = <Device>[];
TextEditingController controller = TextEditingController();
TextEditingController metasController = TextEditingController();
double bufferingProgress = 0.0;
Media? metadataCurrentMedia;
#override
void initState()
{
super.initState();
if (mounted) {
player = Player(
id: widget.index,
videoDimensions: const VideoDimensions(640, 360),
);
player.currentStream.listen((value) {
setState(() => current = value);
});
player.positionStream.listen((value) {
setState(() => position = value);
});
player.playbackStream.listen((value) {
setState(() => playback = value);
});
player.generalStream.listen((value) {
setState(() => general = value);
});
player.videoDimensionsStream.listen((value) {
setState(() => videoDimensions = value);
});
player.bufferingProgressStream.listen(
(value) {
setState(() => bufferingProgress = value);
},
);
player.errorStream.listen((event) {
debugPrint('libVLC error.');
});
devices = Devices.all;
Equalizer equalizer = Equalizer.createMode(EqualizerMode.live);
equalizer.setPreAmp(10.0);
equalizer.setBandAmp(31.25, 10.0);
player.setEqualizer(equalizer);
medias.add(
Media.file(File("C:\\test${widget.index}.mp4"),
),
);
}
}
#override
Widget build(BuildContext context)
{
return ListView(
children: [
ClipRRect(
child: Video(
player: player,
width: 640,
height: 650,
volumeThumbColor: Colors.blue,
volumeActiveColor: Colors.blue,
showControls: true,
),
),
ElevatedButton(
onPressed: () => setState(() {
player.open(Playlist(medias: medias));
},
),
child: const Text('PLAY', style: TextStyle(fontSize: 16)),
),
],
);
}
}
But unfortunately, if I play 4 videos (1920 x 1080, 60 fps) simultaneously, the videos are jerky.
I tried to read the same videos with the official VLC player, and it works fine, so it's apparently not a problem with my machine, but rather an optimization issue. And since I'm a beginner when it comes to video players, I don't really know where to start.
So how can I optimize that, using dart_vlc or something else?
Thanks.