Flutter点击翻转、旋转按钮更新视频及视频裁剪功能实现咨询

首先在_CropScreenState中新增状态变量，导入所需依赖：

import 'dart:math' as math; // 新增导入，用于旋转角度计算

class _CropScreenState extends State<CropScreen> {
  VideoPlayerController controller;
  Future<void> futureController;
  // 新增状态变量
  bool _isHorizontalFlip = false; // 左右翻转标记
  int _rotationCount = 0; // 旋转次数，每次+1对应旋转90度，模4计算
  double _cropAspectRatio; // 裁剪比例，null为原视频比例，可选值1、4/5、2/3等

1. 左右翻转功能实现 #

找到翻转按钮的onTap回调，修改为：

onTap: () {
  setState(() {
    _isHorizontalFlip = !_isHorizontalFlip;
  });
},

2. 90度旋转功能实现 #

找到旋转按钮的onTap回调，修改为：

onTap: () {
  setState(() {
    _rotationCount = (_rotationCount + 1) % 4;
  });
},

3. 多比例裁剪功能实现 #

底部裁剪比例按钮的跳转逻辑全部替换为比例赋值逻辑：

• 原比例按钮：

onTap: () {
  setState(() {
    _cropAspectRatio = null;
  });
},

• 1:1正方形按钮：

onTap: () {
  setState(() {
    _cropAspectRatio = 1;
  });
},

• 4:5比例按钮：

onTap: () {
  setState(() {
    _cropAspectRatio = 4/5;
  });
},

• 2:3比例按钮：

onTap: () {
  setState(() {
    _cropAspectRatio = 2/3;
  });
},

4. 实时更新视频展示效果 #

修改FutureBuilder中视频加载完成后的返回组件，嵌套变换和裁剪逻辑：

if (snapshot.connectionState == ConnectionState.done) {
  // 计算最终展示的比例
  final double displayAspectRatio = _cropAspectRatio ?? controller.value.aspectRatio;
  return Center(
    // 裁剪逻辑
    child: ClipRect(
      child: Align(
        alignment: Alignment.center,
        widthFactor: 1,
        heightFactor: 1,
        child: AspectRatio(
          aspectRatio: displayAspectRatio,
          // 旋转逻辑
          child: Transform.rotate(
            angle: _rotationCount * math.pi / 2,
            // 翻转逻辑
            child: Transform(
              alignment: Alignment.center,
              transform: Matrix4.identity()..scale(_isHorizontalFlip ? -1 : 1, 1),
              child: VideoPlayer(controller),
            ),
          ),
        ),
      ),
    ),
  );
}

补充说明 #

以上实现为预览层的实时视觉变换，如果需要将变换后的视频导出保存，需要使用flutter_ffmpeg等视频处理库，将翻转、旋转、裁剪参数应用到视频文件的编码导出流程中。

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