Flutter Web端自定义WebVideoView添加视频播放完成回调遇命名冲突问题求助

嘿，我太懂你遇到这个命名冲突的糟心感了！咱们来一步步解决这个问题～

首先，问题根源很明确：VoidCallback这个类型在dart:html和Flutter核心库（通过material.dart间接引入的dart:ui）里都有定义，编译器不知道该用哪一个，所以抛出了冲突错误。

给你两种简单可行的解决方案，选你顺手的来：

方案一：给dart:html添加命名前缀 #

这种方法最清晰，能明确区分HTML相关的API和Flutter的API，避免后续再出现类似冲突。

修改你的导入部分：

import 'dart:html' as html; // 给html库加前缀
import 'dart:ui' as ui; // 这里不用再hide VoidCallback了
import 'package:flutter/material.dart';

然后对应修改WebVideoView的状态类代码，所有用到HTML相关的元素都加上html.前缀：

class _WebVideoViewState extends State<WebVideoView> {
  late final String viewType;
  html.VideoElement? _videoElement; // 明确用html库的VideoElement

  @override
  void initState() {
    super.initState();
    viewType = 'video-${widget.url.hashCode}';
    _registerView();
  }

  void _registerView() {
    ui.platformViewRegistry.registerViewFactory(viewType, (int viewId) {
      _videoElement = html.VideoElement()
        ..id = viewType
        ..src = widget.url
        ..controls = true
        ..autoplay = false
        ..style.width = '100%'
        ..style.height = '100%'
        ..style.border = 'none';

      // 监听视频结束事件时，用html库的Event类型
      _videoElement?.onEnded.listen((html.Event event) {
        widget.onVideoComplete?.call();
      });

      return _videoElement!;
    });
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(viewType: viewType);
  }
}

这样修改后，编译器就能明确区分：VideoElement和Event来自HTML库，而VoidCallback则默认使用Flutter的定义，冲突就解决了。

方案二：隐藏dart:html里的VoidCallback #

如果你不想加前缀，也可以在导入dart:html时直接隐藏冲突的VoidCallback，让编译器只使用Flutter的版本：

修改导入：

import 'dart:html' hide VoidCallback; // 隐藏html库的VoidCallback
import 'dart:ui' as ui hide VoidCallback;
import 'package:flutter/material.dart';

这种方法下，你的原有代码基本不用改动，编译器会自动用Flutter的VoidCallback类型处理onVideoComplete参数，冲突也会消失。

验证你的使用代码 #

不管用哪种方案，你原来的调用代码都可以保持不变：

AspectRatio(
  aspectRatio: 16 / 9,
  child: kIsWeb ? WebVideoView(
    url: selectedVideoUrl ?? "",
    onVideoComplete: _handleVideoCompletion,
  ) : selectedVideoUrl == null ? Center(child: Text("No video available")) : BetterPlayer(controller: _betterPlayerController),
),

只要_handleVideoCompletion是符合void Function()签名的方法，就能正常触发视频播放完成的回调啦～

内容来源于stack exchange