如何从API获取URL初始化Flutter video_player？

我需要初始化video_player，但视频URL来自API接口调用。以下是我目前的尝试代码：

初始化相关代码 #

late VideoPlayerController _controller;

Future<Tweet> postsFuture = getPosts();

static Future<Tweet> getPosts() async {
    ...
    return tweet;
}

@override
void initState() {
    super.initState();
    //_initializeVideoController();
}

void _initializeVideoController(String videoUrl) {
    _controller = VideoPlayerController.networkUrl(Uri.parse(videoUrl))
      ..initialize().then((_) {
        setState(() {});
      });
}

Widget Build代码 #

return Scaffold(
      body: Center(
        child: FutureBuilder<Tweet>(
          future: postsFuture,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              final posts = snapshot.data!; 
              String? videoUrl = posts.video;

              if (videoUrl != null) {
                _initializeVideoController(videoUrl);

                return Center(
                  child: _controller.value.isInitialized
                      ? AspectRatio(
                          aspectRatio: _controller.value.aspectRatio,
                          child: VideoPlayer(_controller),
                        )
                      : Container(),
                );
              } ...
          },
        ),
      ),

运行时出现如下异常：

LateError (LateInitializationError: Field '_controller@28272344' has not been initialized.)

请问我哪里出错了？

错误原因 #

1. 初始化时机不对：你在FutureBuilder的builder方法里调用初始化控制器，但builder会被多次触发（组件重建、状态变化等场景），第一次调用初始化方法时_controller才会被赋值，但在这之前你就直接访问_controller.value，此时_controller还未完成初始化，触发未初始化错误。
2. 重复初始化风险：builder多次执行会反复创建VideoPlayerController，既浪费资源也可能引发其他异常。

解决步骤 #

1. 调整控制器初始化时机 #

将控制器初始化逻辑移到initState中，通过Future.then在API返回数据后执行，同时避免重复初始化：

VideoPlayerController? _controller; // 改为可空类型，避免未初始化报错
Future<Tweet>? postsFuture;

@override
void initState() {
  super.initState();
  postsFuture = getPosts().then((tweet) {
    final videoUrl = tweet.video;
    if (videoUrl != null) {
      _controller = VideoPlayerController.networkUrl(Uri.parse(videoUrl))
        ..initialize().then((_) {
          if (mounted) setState(() {}); // 检查组件是否挂载，避免销毁后调用setState
        });
    }
    return tweet;
  });
}

2. 修改FutureBuilder渲染逻辑 #

在builder中先判断控制器是否存在且已初始化，再渲染视频组件：

return Scaffold(
  body: Center(
    child: FutureBuilder<Tweet>(
      future: postsFuture,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final posts = snapshot.data!;
          String? videoUrl = posts.video;

          if (videoUrl != null) {
            if (_controller != null && _controller!.value.isInitialized) {
              return AspectRatio(
                aspectRatio: _controller!.value.aspectRatio,
                child: VideoPlayer(_controller!),
              );
            } else {
              // 视频加载中显示的UI
              return const CircularProgressIndicator();
            }
          } else {
            // 无视频时的UI
            return const Text("无视频内容");
          }
        } else if (snapshot.hasError) {
          return Text("加载失败: ${snapshot.error}");
        } else {
          // API请求中显示的UI
          return const CircularProgressIndicator();
        }
      },
    ),
  ),
);

3. 释放控制器资源 #

在组件销毁时释放控制器，避免内存泄漏：

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

额外注意点 #

• 始终检查mounted状态：在异步回调中调用setState前，必须确认组件仍处于挂载状态，防止组件已销毁时触发异常。
• 优先使用可空类型：将_controller改为可空类型，比late关键字更安全，能明确感知变量是否已完成赋值。

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