Will Pop Scope is not working on video player screen in flutter

Question

I applied will pop scope on that screen it didn't work me its YouTube video player screen. I define all the routes in main.dart is that problem will pop scope is not working Let me know where I am going wrong

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:stocker/models/YouTubeStateModel.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class VideoPlayer extends StatefulWidget {
  const VideoPlayer({
    Key? key,
    required this.videoID,
    required this.data,
  }) : super(key: key);

  static const routeName = '/videoPlayer';

  final YouTubeState data;
  final String videoID;

  @override
  State<VideoPlayer> createState() => _VideoPlayerState();
}

class _VideoPlayerState extends State<VideoPlayer> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      initialVideoId: widget.videoID,
      flags: const YoutubePlayerFlags(
        autoPlay: true,
        mute: false,
      ),
    );

    Future.delayed(
      const Duration(milliseconds: 300),
    ).then((value) {
      _controller.toggleFullScreenMode();
      _controller.setSize(Size(1.sw, 1.sh));
    });
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final width = size.width;
    final height = size.height;
    _controller.setSize(
      width > height
          ? Size(1.sw - ScreenUtil().statusBarHeight, 1.sh)
          : Size(1.sw, 1.sh - ScreenUtil().statusBarHeight),
    );

    return WillPopScope(
      onWillPop: () async {
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.portraitUp,
        ]);
        Navigator.of(context).pop();
        return false;
      },
      child: Stack(
        children: [
          YoutubePlayerBuilder(
            player: YoutubePlayer(
              bottomActions: [
                const SizedBox(width: 14.0),
                CurrentPosition(),
                const SizedBox(width: 8.0),
                ProgressBar(
                  isExpanded: true,
                  // colors: widget,
                ),
                RemainingDuration(),
                const PlaybackSpeedButton(),
              ],
              // aspectRatio: width > height
              //     ? (width - ScreenUtil().statusBarHeight) / height
              //     : (width) / (height - ScreenUtil().statusBarHeight),
              aspectRatio: width > height
                  ? height / (width - ScreenUtil().statusBarHeight)
                  : (height - ScreenUtil().statusBarHeight) / (width),
              controller: _controller,
              width: size.width,
            ),
            builder: (context, player) {
              return Scaffold(
                backgroundColor: Colors.black,
                body: Padding(
                  padding: EdgeInsets.only(top: ScreenUtil().statusBarHeight),
                  child: SizedBox(
                    height: 1.sh - ScreenUtil().statusBarHeight,
                    width: 1.sw,
                    child: Stack(
                      children: [
                        Center(child: player),
                        // Positioned(
                        //   bottom: 100,
                        //   right: 100,
                        //   child: GestureDetector(
                        //     onTap: Navigator.of(context).pop,
                        //     child: SvgPicture.asset(
                        //       'assets/svg/back_arrow.svg',
                        //       color: Colors.white,
                        //       width: 24.h,
                        //       height: 24.h,
                        //     ),
                        //   ),
                        // ),
                      ],
                    ),
                  ),
                ),
              );
            },
          ),
          Positioned(
            left: 5.w,
            top: 30.h,
            child: GestureDetector(
              onTap: () {
                SystemChrome.setPreferredOrientations([
                  DeviceOrientation.portraitUp,
                ]);
                Navigator.of(context).pop();
              },
              child: SvgPicture.asset(
                'assets/svg/back_arrow.svg',
                color: Colors.white,
                width: 16.w,
                height: 16.w,
              ),
            ),
          )
        ],
      ),
    );
  }
}

I applied Will pop scope on the main stack and inside the builder Scaffold as well but at both of the places it didn't work let me know how can I tackle this problem .

Answer 1

/* ::::::::::::::::::::::: OnWillPop show dialog :::::::::::::::::::::::*/

WillPopScope(
      onWillPop: () {
        return openDialog();
     },)

 openDialog() {
    Get.dialog(
      AlertDialog(
        title: const Text('Are Yor Sure?'),
        content: const Text('Do you want to exit this App'),
        actions: [
          TextButton(
            onPressed: () => Get.back(),
            child: const Text("No"),
          ),
          TextButton(
            onPressed: () {
              if (Platform.isAndroid) {
                SystemNavigator.pop(); // or
                // Navigator.pushAndRemoveUntil(
                //         context,
                //         MaterialPageRoute(builder: (context) => HomePage()),
                //         (route) => false);
                print("android>>>>");
              } else if (Platform.isIOS) {
                exit(0);
              }
            },
            child: const Text("Yes"),
          ),
        ],
      ),
    );
  }

2nd way

  onWillPop: () async {
    final shouldPop = await showDialog<bool>(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('Do you want to go back?'),
          actionsAlignment: MainAxisAlignment.spaceBetween,
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(context, true);
              },
              child: const Text('Yes'),
            ),
            TextButton(
              onPressed: () {
                Navigator.pop(context, false);
              },
              child: const Text('No'),
            ),
          ],
        );
      },
    );
    return shouldPop!;
  },