Flutter中FutureBuilder内Youtube Player仅播音频无画面问题求助

问题核心原因 #

在FutureBuilder的build方法中直接创建YoutubePlayerController，且用Column承载多视频组件时，会触发以下问题：

1. build方法频繁执行，控制器被重复创建，导致组件状态混乱
2. Column无滚动回收机制，多视频渲染时出现层叠或渲染上下文冲突
3. 未正确绑定唯一Key与独立控制器的关联，Flutter无法准确区分不同视频组件的状态

解决方案 #

1. 封装独立的视频项StatefulWidget

将每个视频的控制器和UI封装到独立的StatefulWidget中，确保每个视频持有专属控制器，避免状态复用：

class VideoPlayerItem extends StatefulWidget {
  final String videoId;

  const VideoPlayerItem({required this.videoId, super.key});

  @override
  State<VideoPlayerItem> createState() => _VideoPlayerItemState();
}

class _VideoPlayerItemState extends State<VideoPlayerItem> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    // 仅在组件初始化时创建控制器，避免build重复实例化
    _controller = YoutubePlayerController(
      initialVideoId: widget.videoId,
      flags: const YoutubePlayerFlags(
        autoPlay: false,
        mute: false,
        disableDragSeek: true,
        loop: false,
        enableCaption: false,
      ),
    );
  }

  @override
  void dispose() {
    // 组件销毁时释放控制器，避免内存泄漏
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return YoutubePlayer(
      // 用唯一videoId作为Key，确保Flutter正确识别组件
      key: ValueKey(widget.videoId),
      controller: _controller,
      showVideoProgressIndicator: true,
      bottomActions: const [
        CurrentPosition(),
        ProgressBar(isExpanded: true),
        RemainingDuration(),
      ],
    );
  }
}

2. 用ListView替代Column承载多视频

ListView的item回收机制能避免多组件渲染冲突，同时优化长列表性能：

FutureBuilder<List<Certain_Model>>(
  future: futureExercises,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data!.length,
        itemBuilder: (context, index) {
          String videoUrl = snapshot.data![index].videoUrl; // 替换为模型中实际的视频URL字段
          String? videoId = YoutubePlayer.convertUrlToId(videoUrl);
          return videoId != null 
              ? VideoPlayerItem(videoId: videoId)
              : const SizedBox(height: 16); // 无有效视频时的占位组件
        },
      );
    }
    return const Center(child: CircularProgressIndicator());
  },
)

3. 额外排查点

• 确认所有视频URL能正确解析出videoId，无效ID会导致渲染异常
• 检查Android/iOS的WebView基础配置（youtube_player_flutter依赖WebView），确保WebView的权限和渲染环境正常

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