Flutter：使用youtube_player_flutter时视频加载指示器持续显示问题

你遇到的问题是视频能正常播放，但加载环形进度指示器一直不消失，核心原因是Widget没有监听控制器的状态变化，导致视频就绪后UI未更新以隐藏指示器。

以下是两个可行的解决方法：

方法一：添加控制器状态监听器 #

在初始化控制器时添加状态监听器，触发UI更新；同时记得在组件销毁时清理资源：

class _YouTubeVideoWidgetState extends State<YouTubeVideoWidget> {
  
  late YoutubePlayerController controller;
  
  @override
  void initState(){
    super.initState();
    String? videoId = YoutubePlayer.convertUrlToId(widget.url)!;

    controller = YoutubePlayerController(
      initialVideoId: videoId,
      flags: const YoutubePlayerFlags(
        autoPlay: true,
        hideThumbnail: true,
        
      )
    );
    // 添加状态监听器，状态变化时更新UI
    controller.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    // 移除监听器并释放控制器资源
    controller.removeListener(() {
      setState(() {});
    });
    controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return YoutubePlayer(
      controller: controller,
      progressColors: ProgressBarColors(
        backgroundColor: Colors.grey.shade300,
        playedColor: Colors.orange,
      ),
      progressIndicatorColor: Colors.orange,
      onReady: (){},
    );
  }
}

方法二：使用YoutubePlayerBuilder（官方推荐） #

官方推荐用YoutubePlayerBuilder包裹播放器，它会自动处理控制器的状态变化，无需手动添加监听器：

@override
Widget build(BuildContext context) {
  return YoutubePlayerBuilder(
    player: YoutubePlayer(
      controller: controller,
      progressColors: ProgressBarColors(
        backgroundColor: Colors.grey.shade300,
        playedColor: Colors.orange,
      ),
      progressIndicatorColor: Colors.orange,
      onReady: (){},
    ),
    builder: (context, player) {
      return player;
    },
  );
}

两种方法都能解决进度指示器持续显示的问题，推荐使用第二种，更符合官方最佳实践。

内容的提问来源于stack exchange，提问作者A-E