flutter video_player播放器全屏，但是不要拉伸视频

Question

flutter video_player库的播放器想要全屏，但是不要拉伸视频
如何代码实现？

Answer 1

周末不想在家 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

要实现Flutter video_player播放器全屏，但不拉伸视频，可以采用以下步骤：

1. 创建一个全屏弹出对话框，用于展示视频播放器。

2. 设置对话框的背景色为黑色，以提供更好的观看体验。

3. 在对话框中添加一个Stack组件，用于叠加视频播放器和其他UI控件。

4. 将video_player组件添加到Stack中，并使用AspectRatio组件将视频按照原始比例展示。

5. 添加其他UI控件，比如控制条等。

具体代码如下：

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

class FullScreenVideoPlayer extends StatefulWidget {
  final String videoUrl;

  FullScreenVideoPlayer({
    @required this.videoUrl,
  });

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

class _FullScreenVideoPlayerState extends State<FullScreenVideoPlayer> {
  VideoPlayerController _videoPlayerController;
  Future<void> _initializeVideoPlayerFuture;
  bool _isPlaying = false;

  @override
  void initState() {
    super.initState();
    _videoPlayerController = VideoPlayerController.network(widget.videoUrl);
    _initializeVideoPlayerFuture = _videoPlayerController.initialize();
  }

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

  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.black,
      child: Stack(
        children: <Widget>[
          AspectRatio(
            aspectRatio: _videoPlayerController.value.aspectRatio,
            child: VideoPlayer(_videoPlayerController),
          ),
          Center(
            child: IconButton(
              icon: Icon(
                _isPlaying ? Icons.pause : Icons.play_arrow,
                color: Colors.white,
                size: 50.0,
              ),
              onPressed: () {
                setState(() {
                  if (_isPlaying) {
                    _videoPlayerController.pause();
                  } else {
                    _videoPlayerController.play();
                  }
                  _isPlaying = !_isPlaying;
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}

使用方法示例：

void _showFullScreenVideoPlayer(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return FullScreenVideoPlayer(
        videoUrl: 'your_video_url',
      );
    },
  );
}

需要注意的是，使用VideoPlayer播放视频时，默认会根据视频的宽高比例来展示视频。因此，在全屏播放时，为了保持视频的原始宽高比例，我们使用了AspectRatio组件来固定视频的宽高比例。这样即可实现全屏播放，但不拉伸视频。