Flutter 视频播放

视频播放建议用 video_player + chewie，前者提供底层播放器，后者提供控制条 UI。

0. 依赖

dependencies:
  video_player: ^2.7.0
  chewie: ^1.7.5

1. 基础封装

class AppVideoPlayer extends StatefulWidget {
  final String url;
  const AppVideoPlayer({super.key, required this.url});

  @override
  State<AppVideoPlayer> createState() => _AppVideoPlayerState();
}

class _AppVideoPlayerState extends State<AppVideoPlayer> {
  late VideoPlayerController _controller;
  ChewieController? _chewie;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.networkUrl(Uri.parse(widget.url));
    _controller.initialize().then((_) {
      setState(() {});
      _chewie = ChewieController(
        videoPlayerController: _controller,
        autoPlay: true,
        looping: false,
      );
      setState(() {});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    if (_chewie == null) return const Center(child: CircularProgressIndicator());
    return Chewie(controller: _chewie!);
  }
}

2. 全屏与比例

ChewieController(
  videoPlayerController: _controller,
  aspectRatio: 16 / 9,
  allowFullScreen: true,
  autoPlay: true,
);

3. 常见坑点

• 未释放资源：必须 dispose
• 网络视频卡顿：建议开启缓存或切换更低码率
• 初始化状态：未 init 就渲染会报错

4. 实践清单

• 初始化完成再渲染
• dispose 必须调用
• 控制全屏与比例