如何在Flutter的模态底部表单中添加Youtube播放器？

直接通过以下步骤实现：

1. 初始化YouTube播放器控制器 #

在State类中定义并初始化YoutubePlayerController，组件销毁时记得释放资源：

late YoutubePlayerController _controller;

@override
void initState() {
  super.initState();
  _controller = YoutubePlayerController(
    initialVideoId: '你的视频ID', // 替换为目标YouTube视频ID
    flags: const YoutubePlayerFlags(
      autoPlay: true,
      mute: false,
    ),
  );
}

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

2. 构建带播放器的模态底部表单 #

通过showModalBottomSheet方法，将YoutubePlayer作为底部表单的子组件传入，同时设置合适的高度和样式：

ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true, // 可选，适配高度或键盘弹出
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
      ),
      builder: (context) {
        return Container(
          height: MediaQuery.of(context).size.height * 0.6, // 自定义播放器高度
          padding: const EdgeInsets.all(8),
          child: YoutubePlayer(
            controller: _controller,
            showVideoProgressIndicator: true,
            progressIndicatorColor: Colors.blueAccent,
            onReady: () {
              // 播放器就绪后的自定义逻辑
            },
          ),
        );
      },
    );
  },
  child: const Text('打开带YouTube播放器的底部表单'),
)

完整示例代码 #

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

class YoutubeModalDemo extends StatefulWidget {
  const YoutubeModalDemo({super.key});

  @override
  State<YoutubeModalDemo> createState() => _YoutubeModalDemoState();
}

class _YoutubeModalDemoState extends State<YoutubeModalDemo> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      initialVideoId: 'dQw4w9WgXcQ', // 示例视频ID
      flags: const YoutubePlayerFlags(
        autoPlay: true,
        mute: false,
      ),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('YouTube模态播放器示例')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              isScrollControlled: true,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
              ),
              builder: (context) {
                return Container(
                  height: MediaQuery.of(context).size.height * 0.6,
                  child: YoutubePlayer(
                    controller: _controller,
                    showVideoProgressIndicator: true,
                    progressIndicatorColor: Colors.redAccent,
                  ),
                );
              },
            );
          },
          child: const Text('打开播放器'),
        ),
      ),
    );
  }
}

注意事项 #

• 务必在dispose方法中销毁控制器，避免内存泄漏
• 可通过isScrollControlled: true让底部表单适配屏幕高度或键盘弹出
• 调整YoutubePlayerFlags参数可以控制自动播放、静音等播放器行为
• 根据需求自定义底部表单的高度、圆角等样式

内容的提问来源于stack exchange，提问作者Jagal R Nath