Flutter中Chewie包VideoPlayerController延迟初始化解决方案咨询

问题描述 #

我使用chewie包展示和管理视频播放，需要在视频播放启动事件触发时初始化VideoPlayerController（事件返回视频URL，传入VideoPlayerController.network(url)）。但启动时会抛出变量未初始化错误，而该变量因需在initState、build等多处使用，必须用late修饰符。请问能否先将其初始化为空对象再后续覆盖？

相关代码片段：

late VideoPlayerController videoPlayerController;

@override
void initState() {
  _onVideoPresentationChangeSubscription = instance
        .videoPresentation
        .onVideoPresentationChange()
        .listen((event) {
      if (event.type == VideoPresentationEventNames.videoPresentationStarted) {
          videoPlayerController = VideoPlayerController.network(url)..initialize();
      }
  });
}


@override
Widget build(BuildContext context) {
    final chewieController = ChewieController(
        videoPlayerController: videoPlayerController,
        autoPlay: true,
        looping: true,
        showControls: false,
      );

    final playerWidget = Chewie(
        controller: chewieController,
    );

return SizedBox(
      width: MediaQuery.of(context).size.width * 0.9,
      height: MediaQuery.of(context).size.height * 0.3,
      child: AspectRatio(
        aspectRatio: videoPlayerController.value.aspectRatio,
        child: playerWidget,
      ),
    );
}

解决方案 #

首先，不能直接将VideoPlayerController初始化为空对象，因为它没有无参的空构造函数。当前报错的核心原因是：build方法会在initState执行后立即调用，但视频启动事件是异步触发的，此时late修饰的变量还未被赋值，导致未初始化错误。

推荐改用可空类型替代late，并在build中根据控制器状态渲染不同内容，具体实现如下：

修改后的代码示例 #

VideoPlayerController? videoPlayerController;
ChewieController? chewieController;
StreamSubscription? _onVideoPresentationChangeSubscription;

@override
void initState() {
  super.initState();
  _onVideoPresentationChangeSubscription = instance
      .videoPresentation
      .onVideoPresentationChange()
      .listen((event) {
    if (event.type == VideoPresentationEventNames.videoPresentationStarted) {
      // 赋值并初始化控制器，完成后刷新UI
      videoPlayerController = VideoPlayerController.network(event.url)
        ..initialize().then((_) {
          setState(() {
            chewieController = ChewieController(
              videoPlayerController: videoPlayerController!,
              autoPlay: true,
              looping: true,
              showControls: false,
            );
          });
        });
    }
  });
}

@override
void dispose() {
  // 释放资源避免内存泄漏
  videoPlayerController?.dispose();
  chewieController?.dispose();
  _onVideoPresentationChangeSubscription?.cancel();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  // 控制器未初始化时显示加载占位
  if (videoPlayerController == null || !videoPlayerController!.value.isInitialized) {
    return SizedBox(
      width: MediaQuery.of(context).size.width * 0.9,
      height: MediaQuery.of(context).size.height * 0.3,
      child: const Center(child: CircularProgressIndicator()),
    );
  }

  return SizedBox(
    width: MediaQuery.of(context).size.width * 0.9,
    height: MediaQuery.of(context).size.height * 0.3,
    child: AspectRatio(
      aspectRatio: videoPlayerController!.value.aspectRatio,
      child: Chewie(controller: chewieController!),
    ),
  );
}

关键说明 #

• 使用可空类型规避late带来的未初始化风险，通过setState在控制器初始化完成后触发UI更新
• 将ChewieController的创建移到控制器初始化完成后，确保依赖的VideoPlayerController已准备就绪
• 增加dispose方法释放所有相关资源，避免内存泄漏
• 在build中添加加载状态，提升用户等待期间的体验

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