Flutter背景视频无法播放求助：适配Galaxy Fold等设备

问题诊断 #

你的代码出现灰色背景、无法显示视频的核心原因是布局约束冲突：FittedBox 配合固定屏幕尺寸的 Container 打乱了视频的原始比例约束，导致视频无法正确渲染；同时缺少控制器初始化状态的判断和资源释放逻辑。

修正代码 #

以下是适配所有设备、保持视频正方形比例并裁剪填充屏幕的完整实现：

1. 控制器初始化与资源释放

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

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  late VideoPlayerController controller;

  @override
  void initState() {
    super.initState();
    controller = VideoPlayerController.asset("assets/video/login.mp4")
      ..initialize().then((_) {
        controller.play();
        controller.setLooping(true);
        setState(() {});
      });
  }

  @override
  void dispose() {
    // 必须释放控制器资源，避免内存泄漏
    controller.dispose();
    super.dispose();
  }

2. 背景视频布局

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景视频层
          Positioned.fill(
            child: controller.value.isInitialized
                ? ClipRect(
                    child: AspectRatio(
                      aspectRatio: controller.value.aspectRatio,
                      child: FittedBox(
                        fit: BoxFit.cover,
                        alignment: Alignment.center, // 可选：控制裁剪对齐方向
                        child: SizedBox(
                          width: controller.value.size.width,
                          height: controller.value.size.height,
                          child: VideoPlayer(controller),
                        ),
                      ),
                    ),
                  )
                : Container(color: Colors.grey), // 初始化完成前的占位背景
          ),
          // 叠加在视频上的页面内容（比如登录表单）
          // 示例：居中的登录按钮
          Center(
            child: ElevatedButton(
              onPressed: () {},
              child: const Text("登录"),
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

• Positioned.fill：让视频容器占满整个屏幕空间，确保背景覆盖全屏。
• 初始化状态判断：只有当 controller.value.isInitialized 为 true 时才渲染视频，避免初始化阶段的空白/灰色背景。
• BoxFit.cover：保持视频原始正方形比例，裁剪超出屏幕的部分，同时填满整个屏幕——完全符合你“不自动缩放、适配所有设备”的需求。
• 资源释放：在 dispose 方法中释放控制器，避免内存泄漏。

额外检查 #

确保你已在 pubspec.yaml 中正确声明视频资源：

flutter:
  assets:
    - assets/video/login.mp4

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