Once video paly the second will be pause automatically

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.