Once video paly the second will be pause automatically - flutter

Question

file1 : pageViewWidg.dart
class PageViewWidg extends StatefulWidget {
final String videoUrl;
final String videoUrl2;
final String avatarImg;
PageViewWidg({
super.key,
required this.videoUrl,
required this.avatarImg,
required this.videoUrl2,
});
#override
State<PageViewWidg> createState() => _PageViewWidgState();
}
class _PageViewWidgState extends State<PageViewWidg> {
late VideoPlayerController controller;
#override
void initState() {
controller = VideoPlayerController.asset(widget.videoUrl)..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
});
super.initState();
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
// build Profile
buildProfuile(String profilePhoto){
return SizedBox(
width: 60,
height:60,
child: Stack(
children: [
Positioned(child: Container(
width: 50,
height: 50,
padding: const EdgeInsets.all(1),
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.circular(25),
),
child:ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Image(image: NetworkImage(profilePhoto),fit: BoxFit.cover),
),
),
),
],
),
);
}
// build Music Album
buildMusicAlbum(String profilePhoto){
return SizedBox(
width: 60,
height:60,
child:Column(
children: [
Container(
padding: const EdgeInsets.all(8),
width: 50,
height:50,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [ Colors.grey,Colors.white]
),
borderRadius: BorderRadius.circular(25),
),
child:ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image(image: NetworkImage(profilePhoto),fit: BoxFit.cover,),
)
)
],
)
);
}
#override
Widget build(BuildContext context) {
return Expanded(
child: InkWell(
onTap:(){
Navigator.of(context).push(
MaterialPageRoute(builder: (_) => ExpandPageView(avatarImg: widget.avatarImg,imgUrl: widget.videoUrl,controller: controller,),
));
},
child: Stack(
children: [
// AspectRatio(
// aspectRatio: controller.value.aspectRatio,
// child: VideoPlayer(controller),
// ),
controller.value.isInitialized
?
VideoPlayer(controller)
:
Container(),
Center(
child: InkWell(
onTap:(){
controller.value.isPlaying
?
setState((){
controller.pause();
})
:
setState((){
controller.play();
});
},
child:
Image.asset(
controller.value.isPlaying
?
'assets/images/pause_icon.png'
:
'assets/images/play_icon.png'
,
height:50,
)
),
),
file2 : home_screen.dart
class HomeSceen extends StatefulWidget {
const HomeSceen({super.key});
#override
State<HomeSceen> createState() => _HomeSceenState();
}
class _HomeSceenState extends State<HomeSceen> {
List<PageViewWidg> videos=[
PageViewWidg(
videoUrl: 'assets/videos/video.mp4',
videoUrl2: 'assets/videos/video.mp4',
avatarImg: 'assets/images/pic2.jpg',
),
PageViewWidg(
videoUrl: 'assets/videos/video2.mp4',
videoUrl2: 'assets/videos/video2.mp4',
avatarImg: 'assets/images/pic1.jfif',
),
PageViewWidg(
videoUrl: 'assets/videos/video3.mp4',
videoUrl2: 'assets/videos/video3.mp4',
avatarImg: 'assets/images/pic2.jpg',
),
PageViewWidg(
videoUrl: 'assets/videos/video4.mp4',
videoUrl2: 'assets/videos/video2.mp4',
avatarImg: 'assets/images/pic1.jfif',
),
PageViewWidg(
videoUrl: 'assets/videos/video2.mp4',
videoUrl2: 'assets/videos/video2.mp4',
avatarImg: 'assets/images/pic2.jpg',
),
PageViewWidg(
videoUrl: 'assets/videos/video2.mp4',
videoUrl2: 'assets/videos/video2.mp4',
avatarImg: 'assets/images/pic2.jpg',
),
];
final PageController pagecontroller=PageController(
initialPage: 0,
);
//
#override
Widget build(BuildContext context) {
// final size=MediaQuery.of(context).size;
bool like=true;
return Scaffold(
body:SafeArea(
child: PageView.builder(
itemCount: videos.length,
controller:pagecontroller,
scrollDirection: Axis.vertical,
itemBuilder: (context,index){
return Stack(
alignment: AlignmentDirectional.centerEnd,
children:[
Column(
children: [
videos[index],
// Divider(height:2,color:Color.fromARGB(255, 76, 72, 72)),
videos[index+1],
],
),
I tried to add two controller and every controller of video,and it's not work for me.
VideoPlayerController _controller1;
VideoPlayerController _controller2;
#override
void initState() {
super.initState();
_controller1 = VideoPlayerController.assets(videoUrl1)
..initialize().then((_) {
setState(() {});
});
_controller2 = VideoPlayerController.assets(videoUrl2)
..initialize().then((_) {
setState(() {});
});
}
what I need now is how to control two videos when video is start the second will stop and
change their icon or imageAssets like if the icon is paused it changes to the play icon and the second video also if the first video has a pause icon another video will be change to start video.

Answer 1

here is the answer that I found finally.
late VideoPlayerController _controller1;
late VideoPlayerController _controller2;
bool _isPaused1 = true;
bool _isPaused2 = true;
#override
void initState() {
super.initState();
_controller1 =VideoPlayerController.network(videos[3]);
_controller1.addListener(() {
setState(() {});
});
// _controller1.setLooping(true);
_controller1.initialize().then((_) => setState(() {}));
_controller2 =VideoPlayerController.network(videos[5]);
_controller2.addListener(() {
setState(() {});
});
// _controller2.setLooping(true);
_controller2.initialize().then((_) => setState(() {}));
}
#override
void dispose() {
_controller1.dispose();
_controller2.dispose();
super.dispose();
}
_playPauseToggle1() {
setState(() {
if (_isPaused1) {
_controller1.play();
_controller2.pause(); // if _controller1 is playing, _controller2 should be paused
_isPaused2 = true;
} else {
_controller1.pause();
}
_isPaused1 = !_isPaused1;
});
}
_playPauseToggle2() {
setState(() {
if (_isPaused2) {
_controller2.play();
_controller1.pause(); // if _controller2 is playing, _controller1 should be paused
_isPaused1 = true;
} else {
_controller2.pause();
}
_isPaused2 = !_isPaused2;
});
}
VideoPlayer(_controller1),
Center(
child: InkWell(
onTap: _playPauseToggle1,
// ignore: dead_code
child:_isPaused1?
Image.asset('assets/images/play_icon.png',height:50,color: Colors.grey,)
:
Image.asset('assets/images/pause_icon.png',height:50,color: Colors.grey,)
),
),
VideoPlayer(_controller2),
Center(
child: InkWell(
onTap: _playPauseToggle2,
// ignore: dead_code
child:_isPaused2 ?
Image.asset('assets/images/play_icon.png',height:50,color: Colors.grey,)
:
Image.asset('assets/images/pause_icon.png',height:50,color: Colors.grey,)
),
),
and depends on the video if is starting I change the icon otherwise I change the icon to another state.
and I hope it will be helpful for some who looking for like this question.