如何在Flutter Windows中实现视频全屏播放？

针对你提出的「双击视频是否可在Flutter Windows中让视频铺满屏幕」的疑问：完全可以实现，下面是具体的落地方案，基于常用的视频播放和窗口管理插件完成。

1. 引入必要依赖 #

在pubspec.yaml中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  video_player_windows: ^0.1.0 # Windows平台专属视频播放支持
  window_manager: ^0.3.0 # 用于控制Windows窗口的全屏状态

执行flutter pub get完成依赖安装。

2. 初始化窗口管理权限 #

在main.dart的main函数中初始化窗口管理工具，确保能正常控制Windows窗口：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化窗口管理能力
  await windowManager.ensureInitialized();
  runApp(const MyApp());
}

3. 实现带双击全屏的视频播放组件 #

核心逻辑是用GestureDetector包裹视频播放组件，监听双击事件触发全屏切换；同时通过window_manager控制Windows窗口的全屏状态，配合调整视频组件尺寸实现铺满屏幕效果。

完整示例代码：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:video_player_windows/video_player_windows.dart';
import 'package:window_manager/window_manager.dart';

class VideoFullScreenPage extends StatefulWidget {
  const VideoFullScreenPage({super.key});

  @override
  State<VideoFullScreenPage> createState() => _VideoFullScreenPageState();
}

class _VideoFullScreenPageState extends State<VideoFullScreenPage> with WindowListener {
  late VideoPlayerController _controller;
  bool _isFullScreen = false;

  @override
  void initState() {
    super.initState();
    windowManager.addListener(this);
    // 初始化视频控制器，替换为你的本地视频路径或网络视频URL
    _controller = VideoPlayerController.file(
      File('C:/test_video.mp4'),
    )..initialize().then((_) {
        setState(() {});
        _controller.play();
      });
  }

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

  // 同步窗口全屏状态到本地变量
  @override
  void onWindowFullScreen(bool isFullScreen) {
    setState(() {
      _isFullScreen = isFullScreen;
    });
    super.onWindowFullScreen(isFullScreen);
  }

  // 切换全屏状态的核心方法
  void _toggleFullScreen() async {
    final currentFullScreen = await windowManager.isFullScreen();
    await windowManager.setFullScreen(!currentFullScreen);
    // 全屏时隐藏窗口标题栏，退出全屏时恢复显示
    await windowManager.setTitleBarVisibility(!currentFullScreen);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          // 监听双击事件触发全屏切换
          onDoubleTap: _toggleFullScreen,
          child: _controller.value.isInitialized
              ? Container(
                  width: _isFullScreen ? MediaQuery.of(context).size.width : 640,
                  height: _isFullScreen ? MediaQuery.of(context).size.height : 360,
                  child: VideoPlayer(_controller),
                )
              : const CircularProgressIndicator(),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying ? _controller.pause() : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

关键说明 #

• 双击视频区域时，会触发_toggleFullScreen方法，通过window_manager切换窗口全屏状态，同时自动隐藏/显示窗口标题栏。
• 视频组件尺寸会根据全屏状态自适应：非全屏时使用固定的640x360尺寸，全屏时铺满整个窗口。
• 如果使用网络视频，只需将VideoPlayerController.file替换为VideoPlayerController.network并传入视频URL即可。

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