Flutter carousel Slider for dynamic videos - flutter

Question

I am trying to make application in which a gridview show videos from local storage folder, and clicking on any video open slider and play the video. By swiping left or right, play next or previous video, for this purpose
I am using Carousel Slider package to implement sliding effect for dynamic video data, for playing video i am using Video player package
Code for Slider class is below
class VideoSlider extends StatefulWidget {
const VideoSlider({
Key? key,
required this.listOfVideos, // Contains all videos in folder
required this.initialIndex, // initial index used in carousel options to show current page
}) : super(key: key);
final List<String> listOfVideos;
final int initialIndex;
#override
_VideoSliderState createState() => _VideoSliderState();
}
class _VideoSliderState extends State<VideoSlider> {
List<VideoPlayerController> controller = []; // list to contain controller for all files in floder
int i = 0; // used in carousel items to specify controller list index
#override
void initState() {
super.initState();
// used for loop to add controller for all files in controller list
for (int j = 0; j < widget.listOfVideos.length; j++) {
controller.add(
VideoPlayerController.file(File(widget.listOfVideos[j]))
..initialize().then((value) {
setState(() {});
}),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: CarouselSlider(
items: widget.listOfVideos.map((e) {
return controller[i].value.isInitialized
? AspectRatio(
aspectRatio: controller[i].value.aspectRatio,
child: VideoPlayer(controller[i]))
: Container(),}).toList(),
options: CarouselOptions(
height: double.infinity,
viewportFraction: 1,
initialPage: widget.initialIndex,
enlargeCenterPage: true,
enableInfiniteScroll: false,
), ),
// fab to play and pause video
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
);
}
From where i am calling VideoSlider
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return VideoSlider(
listOfVideos: listOfFiles,
initialIndex: index,
);
}),
);
Code display slider with exact number, but every slide show first video(video at zero index) not appropriate.Any solution thanks alot.