Flutter Web集成youtube_player_iframe后跳转下一页卡死无响应问题求助

1. 修复YoutubePlayerController生命周期管理 #

你当前代码直接在YoutubePlayerIFrame构造参数中初始化控制器，没有进行生命周期绑定和资源释放，是最常见的卡死诱因。

• 在页面A的State类中声明控制器变量，在initState中初始化，页面销毁时主动释放资源：

class PageAState extends State<PageA> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      initialVideoId: "NVzIALG7CUc",
      params: const YoutubePlayerParams(
        showVideoAnnotations: false,
        autoPlay: false,
        startAt: Duration(seconds: 0),
        showControls: true,
        showFullscreenButton: false,
      ),
    );
  }

  @override
  void dispose() {
    // 主动释放播放器资源
    _controller.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return YoutubePlayerIFrame(
      controller: _controller,
      aspectRatio: 16 / 9,
    );
  }
}

2. 调整跳转前的资源清理逻辑 #

执行页面前先主动释放播放器资源，再触发跳转：

// 跳转前先释放播放器资源
_controller.close();
if(mounted) {
  Navigator.of(context).pushReplacementNamed('/' + path);
}

3. 验证路由动画冲突 #

Web端iframe元素和Flutter自定义过渡动画可能存在渲染冲突，可先临时移除路由过渡动画验证问题：

return PageRouteBuilder(
  settings: settings,
  pageBuilder: (_, __, ___) => wid,
  // 临时移除过渡动画验证
  transitionsBuilder: (_, a, __, c) => c,
);

如果移除动画后恢复正常，可改用无动画路由跳转，或者跳转前先把YoutubePlayerIFrame从组件树中移除再执行跳转。

4. 版本兼容检查 #

确认当前使用的youtube_player_iframe版本和Flutter SDK版本匹配，优先升级到库的最新稳定版，部分旧版本存在Web端资源未正确释放的已知问题。

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