Flutter视频画面旋转教程 支持不同方向观看

在Flutter中实现视频画面旋转功能时，遇到以下问题：如何动态适配不同设备方向（如竖屏转横屏）并保持画面比例？目前使用RotationTransition时，横屏状态下视频会被拉伸变形，尝试用AspectRatio约束比例但旋转动画会失效。有没有完整的示例代码兼顾以下需求：

  1. 支持0/90/180/270度手动旋转按钮控制
  2. 自动感应设备方向切换
  3. 横竖屏切换时不裁剪画面内容？ 尤其需要解决Android/iOS平台旋转时黑边问题。
3 回复

以下是一个简单的 Flutter 视频旋转支持不同方向观看的教程：

  1. 引入依赖
    在 pubspec.yaml 中添加依赖：

    dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.4.5

  2. 初始化视频控制器
    创建一个 VideoPlayerController 并加载视频：

    VideoPlayerController _controller;
[@override](/user/override)
void initState() {
  super.initState();
  _controller = VideoPlayerController.network(
      'https://www.example.com/video.mp4')
    ..initialize().then((_) {
      _controller.setLooping(true);
      setState(() {});
    });
}

  3. 控制旋转
    使用 MediaQuery 检测屏幕方向，并动态调整视频显示：

    Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: _controller.value.isInitialized
          ? Transform.rotate(
              angle: MediaQuery.of(context).orientation == Orientation.portrait
                  ? 0
                  : pi / 2, // 横屏旋转90度
              child: AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              ),
            )
          : Container(),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          _controller.value.isPlaying
              ? _controller.pause()
              : _controller.play();
        });
      },
    ),
  );
}

  4. 释放资源
    在页面销毁时释放资源：

    [@override](/user/override)
void dispose() {
  _controller.dispose();
  super.dispose();
}

这样，视频就能根据屏幕方向自动旋转并正常播放了。

更多关于Flutter视频画面旋转教程 支持不同方向观看的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


以下是一个简单的Flutter实现视频画面旋转的教程：

  1. 使用video_player插件加载视频。
  2. 通过监听设备的方向变化（使用orientation插件），动态调整视频视图的方向。
  3. 在build方法中根据方向设置Transform.rotate旋转参数。

代码示例：

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

class RotateVideoPlayer extends StatefulWidget {
  @override
  _RotateVideoPlayerState createState() => _RotateVideoPlayerState();
}

class _RotateVideoPlayerState extends State<RotateVideoPlayer> {
  VideoPlayerController? _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://example.com/your_video.mp4')
      ..initialize().then((_) {
        _controller!.play();
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: AlwaysStoppedAnimation(0.5), // 根据方向计算旋转角度
      child: AspectRatio(
        aspectRatio: _controller!.value.aspectRatio,
        child: VideoPlayer(_controller!),
      ),
    );
  }

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

注意：需要监听方向变化并动态更新turns值。

Flutter视频画面旋转教程

在Flutter中实现视频画面旋转，可以使用Transform.rotate或RotatedBox组件，以下是实现方法：

1. 使用Transform.rotate旋转视频

import 'package:flutter/material.dart';

class RotatedVideoPlayer extends StatelessWidget {
  final Widget videoPlayer;
  final double angle; // 旋转角度(弧度)

  RotatedVideoPlayer({required this.videoPlayer, this.angle = 0});

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: angle,
      child: videoPlayer,
    );
  }
}

2. 使用RotatedBox旋转90度倍数

import 'package:flutter/material.dart';

class QuarterTurnVideo extends StatelessWidget {
  final Widget videoPlayer;
  final int quarterTurns; // 1=90度, 2=180度, 3=270度

  QuarterTurnVideo({required this.videoPlayer, this.quarterTurns = 0});

  @override
  Widget build(BuildContext context) {
    return RotatedBox(
      quarterTurns: quarterTurns,
      child: videoPlayer,
    );
  }
}

3. 完整示例(使用chewie视频播放器)

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

class VideoRotationScreen extends StatefulWidget {
  @override
  _VideoRotationScreenState createState() => _VideoRotationScreenState();
}

class _VideoRotationScreenState extends State<VideoRotationScreen> {
  late VideoPlayerController _videoPlayerController;
  late ChewieController _chewieController;
  int _rotation = 0;

  @override
  void initState() {
    super.initState();
    _videoPlayerController = VideoPlayerController.network('视频URL');
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      autoPlay: true,
      looping: true,
    );
  }

  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('视频旋转')),
      body: Column(
        children: [
          Expanded(
            child: RotatedBox(
              quarterTurns: _rotation,
              child: Chewie(controller: _chewieController),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => setState(() => _rotation = 0),
                child: Text('0度'),
              ),
              ElevatedButton(
                onPressed: () => setState(() => _rotation = 1),
                child: Text('90度'),
              ),
              ElevatedButton(
                onPressed: () => setState(() => _rotation = 2),
                child: Text('180度'),
              ),
              ElevatedButton(
                onPressed: () => setState(() => _rotation = 3),
                child: Text('270度'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

注意事项：

  1. 旋转后可能需要调整父容器大小
  2. 确保视频播放器插件支持旋转
  3. 某些插件可能有自己的旋转属性，如video_player的setLooping
回到顶部