使用VideoPlayer时遭遇LateInitializationError问题及解决咨询

问题重现 #

在Flutter页面中使用VideoPlayer播放API获取的视频时，代码实现如下：

初始化方法 #

@override
void initState() {
  super.initState();
  getCandidateProfileVideo();
}

状态类变量定义 #

late VideoPlayerController _controller;
late Future<void> _initializeVideoPlayerFuture;
String videoUrl = "";

获取视频地址并初始化播放器的方法 #

getCandidateProfileVideo() async {
  // await调用REST API获取视频地址并赋值给videoUrl

  _controller = VideoPlayerController.network(
        videoUrl,
      );
      _initializeVideoPlayerFuture = _controller.initialize();
      _controller.setLooping(true);
      _controller.setVolume(1.0);
}

加载页面时触发错误：

LateInitializationError: Field '_initializeVideoPlayerFuture@75490850' has not been initialized.

错误原因 #

_initializeVideoPlayerFuture用late关键字修饰，要求必须在被使用前完成初始化。但getCandidateProfileVideo是异步方法，API请求存在延迟，页面UI渲染时（比如通过FutureBuilder关联该Future），这个变量还未被赋值，直接触发了未初始化的错误。

解决方法 #

• 修改变量定义：去掉late修饰，将变量改为可空类型，避免强制初始化要求

  VideoPlayerController? _controller;
  Future<void>? _initializeVideoPlayerFuture;
  String videoUrl = "";
  

• 更新异步方法并通知UI：在获取视频地址完成后，调用setState通知UI更新状态，同时增加mounted判断避免页面销毁后触发异常

  void getCandidateProfileVideo() async {
    // 替换为实际API请求逻辑
    videoUrl = await fetchVideoUrlFromAPI();
  
    if (mounted) {
      _controller = VideoPlayerController.network(videoUrl);
      _initializeVideoPlayerFuture = _controller!.initialize();
      _controller!.setLooping(true);
      _controller!.setVolume(1.0);
      setState(() {});
    }
  }
  

• UI层增加空判断：在build方法中先判断变量是否为空，再执行对应的渲染逻辑

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _initializeVideoPlayerFuture == null
            ? const CircularProgressIndicator()
            : FutureBuilder(
                future: _initializeVideoPlayerFuture,
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.done) {
                    return AspectRatio(
                      aspectRatio: _controller!.value.aspectRatio,
                      child: VideoPlayer(_controller!),
                    );
                  } else {
                    return const CircularProgressIndicator();
                  }
                },
              ),
      ),
      floatingActionButton: _controller != null
          ? FloatingActionButton(
              onPressed: () {
                setState(() {
                  _controller!.value.isPlaying
                      ? _controller!.pause()
                      : _controller!.play();
                });
              },
              child: Icon(
                _controller!.value.isPlaying ? Icons.pause : Icons.play_arrow,
              ),
            )
          : null,
    );
  }
  

• 页面销毁时释放资源：在dispose方法中释放控制器资源，避免内存泄漏

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

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