YoutubePlayer空视频URL报错求助：空值引发红屏与控制器错误

安全阿岳

2026-6-28

解决Flutter YoutubePlayer空URL红屏报错问题

问题根源

报错核心是initState阶段未做空值校验：

当widget.fvideo为空时，YoutubePlayer.convertUrlToId(widget.fvideo)返回null
代码中用videoID!强制解包null值，直接触发空指针异常导致红屏
build中的判断在异常抛出后执行，无法提前拦截错误

修复方案

在initState中先校验widget.fvideo有效性，仅当URL非空且能解析出有效videoID时才创建控制器
移除强制解包操作，改用空安全的条件判断
优化build渲染逻辑，确保控制器有效时才渲染播放器

修改后的完整代码

late YoutubePlayerController? _controller;

@override
void initState() {
  super.initState();
  // 先校验URL有效性，再解析videoID
  if (widget.fvideo.isNotEmpty) {
    final videoID = YoutubePlayer.convertUrlToId(widget.fvideo);
    // 仅当videoID不为null时创建控制器
    if (videoID != null) {
      _controller = YoutubePlayerController(
        initialVideoId: videoID,
        flags: const YoutubePlayerFlags(
          autoPlay: false,
        ),
      );
    }
  }
}

@override
void dispose() {
  _controller?.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              // 同时校验URL和控制器有效性
              if (widget.fvideo.isNotEmpty && _controller != null)
                YoutubePlayer(
                  controller: _controller!,
                  showVideoProgressIndicator: true,
                  bottomActions: [
                    CurrentPosition(),
                    ProgressBar(isExpanded: true),
                  ],
                )
              else
                const Text('No video provided'),
            ],
          ),
        ),
      ),
    ),
  );
}