Flutter中视频完全无法适配容器问题求助

问题核心是视频宽高比与容器固定尺寸的宽高比不匹配，且未做裁剪/适配处理，导致视频溢出容器。以下是可行修复方案：

关键修改点 #

• 用ClipRRect裁剪超出容器的视频部分，匹配容器圆角
• 通过FittedBox让视频按比例适配容器，可选BoxFit.contain（完整显示，留黑边）或BoxFit.cover（铺满容器，裁剪超出部分）
• 借助FutureBuilder等待视频初始化完成，避免获取错误的宽高比

修改后的完整代码 #

// ignore_for_file: prefer_const_constructors

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

import 'components/constants.dart';

class Practice extends StatefulWidget {
  static const id = 'practice.dart';
  const Practice({super.key});

  @override
  State<Practice> createState() => _PracticeState();
}

class _PracticeState extends State<Practice> {
  late VideoPlayerController _videoMainController;
  late Future<void> _initializeMainVideoPlayerFuture;

  @override
  void initState() {
    //main video
    _videoMainController = VideoPlayerController.asset('assets/videos/vid6.mp4');
    _initializeMainVideoPlayerFuture = _videoMainController.initialize();
    _videoMainController.setLooping(true);
    _videoMainController.setVolume(0.0);
    _videoMainController.play();

    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('V I D E O'),
        backgroundColor: Colors.deepPurple,
        centerTitle: true,
      ),
      backgroundColor: Colors.deepPurpleAccent[100],
      body: Center( // 让容器居中，适配不同屏幕
        child: Container(
          width: 848,
          height: 480,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.yellow, width: 4),
            borderRadius: BorderRadius.circular(20),
          ),
          child: ClipRRect( // 裁剪超出容器的部分，匹配容器圆角
            borderRadius: BorderRadius.circular(16), // 减去边框宽度，保证圆角与容器一致
            child: FutureBuilder(
              future: _initializeMainVideoPlayerFuture,
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  return FittedBox(
                    fit: BoxFit.cover, // 按需替换为BoxFit.contain
                    child: SizedBox(
                      width: _videoMainController.value.size.width,
                      height: _videoMainController.value.size.height,
                      child: VideoPlayer(_videoMainController),
                    ),
                  );
                } else {
                  return const Center(child: CircularProgressIndicator());
                }
              },
            ),
          ),
        ),
      ),
    );
  }
}

可选调整 #

• 若需视频完整显示不裁剪，将BoxFit.cover改为BoxFit.contain，容器空白处会显示背景色
• 若不需要固定容器尺寸，可删除width:848和height:480，替换为width: MediaQuery.of(context).size.width * 0.8这类相对尺寸，适配不同屏幕

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