Flutter Web中Youtube_Player_IFrame插件无法使用求助

问题原因 #

你遇到的断言错误，是因为Flutter Web环境下，webview_flutter需要单独的Web端实现依赖，仅添加核心的webview_flutter包无法自动完成Web平台的初始化。

解决步骤 #

1. 添加Web端WebView依赖 #

修改pubspec.yaml的依赖配置，加入webview_flutter_web包（版本需与webview_flutter兼容，以下版本适配你当前的webview_flutter: ^4.7.0）：

dependencies:
  youtube_player_iframe: ^5.1.2
  webview_flutter: ^4.7.0
  webview_flutter_web: ^0.2.2+1

2. 初始化WebView平台实现 #

在项目的main.dart中，添加WebView平台初始化代码，确保在runApp之前执行：

import 'package:flutter/material.dart';
import 'package:webview_flutter_web/webview_flutter_web.dart';
import 'package:webview_flutter_platform_interface/webview_flutter_platform_interface.dart';

void main() {
  // 初始化Web端WebView平台实现
  WebViewPlatform.instance = WebWebViewPlatform();
  runApp(const MyApp());
}

3. 优化组件控制器管理（推荐） #

不要在build方法中创建YoutubePlayerController，因为build会频繁触发，重复创建控制器会导致资源浪费和异常。改为用StatefulWidget管理：

import 'package:flutter/material.dart';
import 'package:youtube_player_iframe/youtube_player_iframe.dart';

class Project extends StatefulWidget {
  final String title;
  final String details;
  final String url;
  const Project(this.title, this.details, this.url, {super.key});

  @override
  State<Project> createState() => _ProjectState();
}

class _ProjectState extends State<Project> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController.fromVideoId(
      videoId: 'TYX3wGsKpwI',
      autoPlay: false,
      params: const YoutubePlayerParams(showFullscreenButton: true),
    );
  }

  @override
  void dispose() {
    // 销毁控制器释放资源
    _controller.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      child: YoutubePlayer(
        controller: _controller,
        aspectRatio: 16 / 9,
      ),
    );
  }
}

4. 更新依赖并重启项目 #

执行以下命令更新依赖：

flutter pub get

注意：不要仅使用热重载，需要完全重启项目才能让依赖变更生效

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