Flutter video_player插件热重载/删视频后黑屏问题求修复方案

方案1：封装独立播放器并保留状态 #

将视频播放器抽成独立的StatefulWidget，混入AutomaticKeepAliveClientMixin强制保留组件状态，避免StreamBuilder重建时销毁播放器实例。

class VideoPlayerItem extends StatefulWidget {
  final String videoUrl;
  const VideoPlayerItem({Key? key, required this.videoUrl}) : super(key: key);

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

class _VideoPlayerItemState extends State<VideoPlayerItem> with AutomaticKeepAliveClientMixin {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(widget.videoUrl)
      ..initialize().then((_) => setState(() {}));
  }

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

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用以激活状态保留
    return _controller.value.isInitialized
        ? AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          )
        : const Center(child: CircularProgressIndicator());
  }
}

在StreamBuilder的itemBuilder中直接使用该组件即可，已初始化的播放器状态会被保留，不会随StreamBuilder重建失效。

方案2：手动管理Firestore流订阅 #

放弃使用StreamBuilder，在页面的initState中手动订阅Firestore流，将数据存在本地变量，通过setState更新UI，减少不必要的重建触发。

class VideoListScreen extends StatefulWidget {
  const VideoListScreen({Key? key}) : super(key: key);

  @override
  State<VideoListScreen> createState() => _VideoListScreenState();
}

class _VideoListScreenState extends State<VideoListScreen> {
  late StreamSubscription<QuerySnapshot> _firestoreSub;
  List<DocumentSnapshot> _videoList = [];

  @override
  void initState() {
    super.initState();
    // 手动订阅流，仅在数据真变化时更新UI
    _firestoreSub = FirebaseFirestore.instance.collection('videos').snapshots().listen((snapshot) {
      setState(() => _videoList = snapshot.docs);
    });
  }

  @override
  void dispose() {
    _firestoreSub.cancel(); // 销毁时取消订阅，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _videoList.length,
      itemBuilder: (context, index) {
        final videoUrl = _videoList[index]['url'] as String;
        return VideoPlayerItem(videoUrl: videoUrl);
      },
    );
  }
}

方案3：用ValueNotifier缩小重建范围 #

将视频数据存入ValueNotifier，通过ValueListenableBuilder监听变化，仅在数据更新时刷新列表，相比StreamBuilder重建范围更小。

class VideoListScreen extends StatefulWidget {
  const VideoListScreen({Key? key}) : super(key: key);

  @override
  State<VideoListScreen> createState() => _VideoListScreenState();
}

class _VideoListScreenState extends State<VideoListScreen> {
  late StreamSubscription<QuerySnapshot> _firestoreSub;
  final ValueNotifier<List<DocumentSnapshot>> _videoNotifier = ValueNotifier([]);

  @override
  void initState() {
    super.initState();
    _firestoreSub = FirebaseFirestore.instance.collection('videos').snapshots().listen((snapshot) {
      _videoNotifier.value = snapshot.docs;
    });
  }

  @override
  void dispose() {
    _firestoreSub.cancel();
    _videoNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<List<DocumentSnapshot>>(
      valueListenable: _videoNotifier,
      builder: (context, videos, _) {
        return ListView.builder(
          itemCount: videos.length,
          itemBuilder: (context, index) {
            final videoUrl = videos[index]['url'] as String;
            return VideoPlayerItem(videoUrl: videoUrl);
          },
        );
      },
    );
  }
}

额外注意点 #

• 播放器组件必须在dispose中释放VideoPlayerController，避免内存泄漏；
• 删除视频后，确保对应的播放器组件被正确销毁，避免持有无效链接；
• Hot reload时，可在播放器初始化逻辑中增加判断，避免重复创建控制器实例。

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