flutter video_player 播放一边占满另一边剪切

Question

flutter video_player 播放器播放视频不拉伸不压缩，视频一边占满另一边进行剪切，固定播放器尺寸
如何实现？

Answer 1

引自免费微信小程序：皆我百晓生

在 Flutter 中使用 video_player 插件实现一边占满，另一边剪切的效果，你需要自定义一个 Container 并通过 BoxFit 设置视频的填充模式。这里我们选择 BoxFit.cover 模式来确保视频始终铺满容器的一边，并剪切掉超出部分。

以下是一个基本示例：

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

class VideoPlayerScreen extends StatefulWidget {
  final String videoUrl; // 视频文件URL

  const VideoPlayerScreen({Key? key, required this.videoUrl}) : super(key: key);

  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _controller;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width, // 宽度充满屏幕
        height: 200.0, // 自定义固定高度，根据需求调整
        child: AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: VideoPlayer(_controller),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              _controller.play();
            }
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }

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

上述代码中，关键在于 AspectRatio 组件的应用。它会根据视频自身的宽高比自动调整大小，而外部的 Container 则设置了固定的宽度和高度，因此视频会按照 BoxFit.cover 的默认行为进行填充展示，即始终保持某一边铺满并裁剪另一尺寸过大的边。