移动端按下返回键如何最小化全屏状态的Flutter Youtube播放器

你需要通过拦截返回键事件、补充播放器状态监听逻辑两步实现需求，以下是完整修改后的代码：

import 'package:flutter/services.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class _VideoPlayerState extends State<VideoPlayer> {
  late YoutubePlayerController _youtubePlayerController;
  late bool _isPlayerReady;

  @override
  void initState() {
    super.initState();
    _isPlayerReady = false;
    var url = widget.video.url;
    var videoUrl = YoutubePlayer.convertUrlToId(url!);
    _youtubePlayerController = YoutubePlayerController(
      initialVideoId: videoUrl!,
      flags: const YoutubePlayerFlags(
        autoPlay: false,
        mute: false,
        disableDragSeek: false,
        loop: false,
        isLive: false,
        forceHD: false,
        hideControls: false,
      ),
    )..addListener(_listener);
  }

  void _listener() {
    if (_isPlayerReady && mounted) {
      // 监听播放器退出全屏事件，强制切回竖屏
      if (!_youtubePlayerController.value.isFullScreen) {
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.portraitUp,
          DeviceOrientation.portraitDown,
        ]);
      }
    }
  }

  @override
  void dispose() {
    _youtubePlayerController.dispose();
    // 页面销毁时恢复默认竖屏配置
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    super.dispose();
  }

  @Override
  Widget build(BuildContext context) {
    return WillPopScope(
      // 拦截返回键事件
      onWillPop: () async {
        if (_youtubePlayerController.value.isFullScreen) {
          // 当前是全屏状态，先退出全屏
          _youtubePlayerController.toggleFullScreenMode();
          // 阻止页面返回
          return false;
        }
        // 非全屏状态正常响应返回操作
        return true;
      },
      child: Container(
        child: YoutubePlayer(
          controller: _youtubePlayerController,
          aspectRatio: 16 / 9,
          showVideoProgressIndicator: true,
          onReady: () {
            _isPlayerReady = true;
          },
        ),
      ),
    );
  }
}

核心改动说明 #

• 新增WillPopScope组件拦截系统返回事件：当播放器处于全屏状态时，按下返回键仅触发退出全屏操作，不会直接关闭当前页面
• 补充监听器逻辑：监听到播放器退出全屏时，主动调用系统API强制应用切回竖屏方向，避免停留在横屏状态
• 修正dispose阶段的方向配置：页面销毁时统一重置为App默认的竖屏方向，避免页面退出后全局方向错乱

内容的提问来源于stack exchange，提问作者Dhaval Chaudhari