Flutter中Youtube Player退出全屏后状态栏永久隐藏问题求助

问题：使用YoutubePlayer时，点击全屏按钮切换至横屏模式，返回竖屏后状态栏在应用中永久隐藏，需要实现竖屏模式下状态栏持续显示。

相关代码：

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

/// Creates list of video players
class VideoList extends StatefulWidget {
  @override
  _VideoListState createState() => _VideoListState();
}

class _VideoListState extends State<VideoList> {
  final List<YoutubePlayerController> _controllers = [
    'K4TOrB7at0Y',
  ]
      .map<YoutubePlayerController>(
        (videoId) => YoutubePlayerController(
          initialVideoId: videoId,
          flags: const YoutubePlayerFlags(
            autoPlay: false,
          ),
        ),
      )
      .toList();

  @override
  Widget build(BuildContext context) {
    return YoutubePlayerBuilder(
      player: YoutubePlayer(controller: _controllers.first),
      builder: (p0, p1) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Video Player'),
          ),
          body: Column(children: [
            p1,
          ]),
        );
      },
    );
  }
}

解决方法 #

通过监听YoutubePlayer的全屏状态变化，在退出全屏时主动恢复状态栏显示：

1. 导入flutter/services.dart包，用于控制系统UI
2. 在initState中给播放器控制器添加全屏状态监听器
3. 退出全屏时，重置系统UI样式，确保状态栏显示
4. 在dispose中移除监听器，避免内存泄漏

修改后的完整代码：

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

/// Creates list of video players
class VideoList extends StatefulWidget {
  @override
  _VideoListState createState() => _VideoListState();
}

class _VideoListState extends State<VideoList> {
  final List<YoutubePlayerController> _controllers = [
    'K4TOrB7at0Y',
  ]
      .map<YoutubePlayerController>(
        (videoId) => YoutubePlayerController(
          initialVideoId: videoId,
          flags: const YoutubePlayerFlags(
            autoPlay: false,
          ),
        ),
      )
      .toList();

  @override
  void initState() {
    super.initState();
    // 添加全屏状态监听
    _controllers.first.addListener(_onPlayerStateChanged);
  }

  void _onPlayerStateChanged() {
    final controller = _controllers.first;
    // 当退出全屏时
    if (!controller.value.isFullScreen) {
      // 恢复状态栏显示，设置系统UI样式
      SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent, // 可根据需求修改状态栏颜色
        statusBarIconBrightness: Brightness.dark, // 适配深色/浅色图标
      ));
      // 强制设置为竖屏（可选，确保回到竖屏模式）
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);
      // 触发UI更新，确保状态栏重新渲染
      setState(() {});
    }
  }

  @override
  void dispose() {
    // 移除监听器
    _controllers.first.removeListener(_onPlayerStateChanged);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return YoutubePlayerBuilder(
      player: YoutubePlayer(controller: _controllers.first),
      builder: (p0, p1) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Video Player'),
          ),
          body: Column(children: [
            p1,
          ]),
        );
      },
    );
  }
}

关键说明 #

• SystemChrome.setSystemUIOverlayStyle：直接控制状态栏的显示与样式，退出全屏时重置该配置，覆盖YoutubePlayer对状态栏的修改
• 监听isFullScreen状态：精准捕捉退出全屏的时机，及时恢复状态栏
• 可选的竖屏设置：确保退出全屏后回到竖屏模式，避免方向异常

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