Flutter YouTube Player在AppBar上重叠视频

wwwo4jvm  于 2023-10-22  发布在  Flutter
关注(0)|答案(1)|浏览(197)

我正在使用Flutter开发一个移动的应用程序,我正在使用“youtube_player”包在我的应用程序中显示YouTube视频。但是,当我列出视频并向上滚动时,视频与AppBar重叠,这是意外的行为。如何解决此问题?
Code Snippets:毕业证
https://i.stack.imgur.com/h3hPJ.jpg
https://i.stack.imgur.com/TVzzD.png)]

  1. class YoutubeVideoPlayer extends YoutubePlayer {
  2. YoutubeVideoPlayer(BuildContext context,
  3. {Key? key, required YoutubePlayerController controller})
  4. : super(
  5. key: ObjectKey(controller.initialVideoId),
  6. controller: controller,
  7. showVideoProgressIndicator: true,
  8. progressIndicatorColor: context.colorScheme.primary,
  9. aspectRatio: context.width(.2) / context.height(.054),
  10. bottomActions: [
  11. CurrentPosition(),
  12. const SizedBox(width: 10.0),
  13. ProgressBar(isExpanded: true),
  14. const SizedBox(width: 10.0),
  15. FullScreenButton(),
  16. ],
  17. );
  18. }
  1. import 'package:auto_route/auto_route.dart';
  2. import 'package:doktorumsun_app/core/extension/context_extension.dart';
  3. import 'package:doktorumsun_app/product/constant/count_constant.dart';
  4. import 'package:doktorumsun_app/product/widget/player/youtebe_video_player.dart';
  5. import 'package:doktorumsun_app/product/widget/text/text_widget.dart';
  6. import 'package:flutter/material.dart';
  7. import 'package:flutter/services.dart';
  8. import 'package:visibility_detector/visibility_detector.dart';
  9. import 'package:youtube_player_flutter/youtube_player_flutter.dart';
  10. class YoutubeVideo extends StatefulWidget {
  11. final String? subtitle;
  12. final String videoKey;
  13. const YoutubeVideo({super.key, required this.videoKey, this.subtitle});
  14. @override
  15. State<YoutubeVideo> createState() => _YoutubeVideoState();
  16. }
  17. class _YoutubeVideoState extends State<YoutubeVideo> {
  18. late YoutubePlayerController _controller;
  19. late TextEditingController _idController;
  20. late TextEditingController _seekToController;
  21. bool isFullScreen = true;
  22. final bool _isPlayerReady = false;
  23. @override
  24. void initState() {
  25. super.initState();
  26. SystemChrome.setPreferredOrientations([
  27. DeviceOrientation.portraitUp,
  28. ]);
  29. _controller = YoutubePlayerController(
  30. /* */
  31. initialVideoId: widget.videoKey,
  32. flags: const YoutubePlayerFlags(
  33. hideControls: true,
  34. mute: false,
  35. autoPlay: false,
  36. disableDragSeek: false,
  37. useHybridComposition: false,
  38. showLiveFullscreenButton: false,
  39. loop: false,
  40. controlsVisibleAtStart: false,
  41. isLive: false,
  42. forceHD: false,
  43. enableCaption: false,
  44. ),
  45. )..addListener(listener);
  46. _idController = TextEditingController();
  47. _seekToController = TextEditingController();
  48. }
  49. void listener() {
  50. if (_isPlayerReady && mounted && !_controller.value.isFullScreen) {
  51. setState(() {});
  52. }
  53. }
  54. @override
  55. void deactivate() {
  56. // Pauses video while navigating to next page.
  57. _controller.pause();
  58. super.deactivate();
  59. }
  60. @override
  61. void dispose() {
  62. _controller.dispose();
  63. _idController.dispose();
  64. _seekToController.dispose();
  65. super.dispose();
  66. }
  67. @override
  68. Widget build(BuildContext context) {
  69. return VisibilityDetector(
  70. key: const Key("youtube-vide"),
  71. onVisibilityChanged: (info) {
  72. if (info.visibleFraction == 0) {
  73. _controller.pause();
  74. } else {
  75. _controller.value.isPlaying
  76. ? _controller.play()
  77. : _controller.pause();
  78. }
  79. },
  80. child: Column(
  81. children: [
  82. _youtubeVideoPlayer(context),
  83. if (_controller.value.isFullScreen == false)
  84. Padding(
  85. padding: context.paddingAll(6),
  86. child: TextWidget.subtitle(
  87. text: widget.subtitle ?? '',
  88. fontWeight: FontWeight.bold,
  89. maxLines: CountConstant.two,
  90. textAlign: TextAlign.center,
  91. ),
  92. )
  93. ],
  94. ),
  95. );
  96. }
  97. YoutubePlayerBuilder _youtubeVideoPlayer(BuildContext context) {
  98. return YoutubePlayerBuilder(
  99. player: YoutubeVideoPlayer(
  100. context,
  101. controller: _controller,
  102. ),
  103. builder: (context, player) {
  104. _controller = YoutubePlayerController(
  105. initialVideoId: widget.videoKey,
  106. flags: const YoutubePlayerFlags(
  107. autoPlay: true,
  108. ),
  109. );
  110. return InkWell(
  111. onTap: () {
  112. showGeneralDialog(
  113. context: context,
  114. pageBuilder: (context, animation, secondaryAnimation) => Dialog(
  115. insetPadding: EdgeInsets.zero,
  116. child: Stack(
  117. children: [
  118. GestureDetector(
  119. onVerticalDragEnd: (DragEndDetails details) {
  120. if (details.primaryVelocity! > 0) {
  121. context.router.pop();
  122. SystemChrome.setPreferredOrientations([
  123. DeviceOrientation.portraitUp,
  124. ]);
  125. }
  126. },
  127. child: YoutubePlayer(
  128. controller: _controller,
  129. ),
  130. ),
  131. Positioned(
  132. right: CountConstant.zero.toDouble(),
  133. child: IconButton(
  134. onPressed: () {
  135. SystemChrome.setPreferredOrientations([
  136. DeviceOrientation.portraitUp,
  137. ]);
  138. context.popRoute();
  139. },
  140. icon: const DecoratedBox(
  141. decoration: BoxDecoration(
  142. shape: BoxShape.circle, color: Colors.red),
  143. child: Icon(
  144. Icons.close,
  145. color: Colors.white,
  146. ),
  147. )),
  148. ),
  149. ],
  150. ),
  151. ),
  152. );
  153. },
  154. child: player);
  155. },
  156. );
  157. }
  158. }
vuktfyat

vuktfyat1#

您可以使用quill版本,而不是其相同的源代码https://pub.dev/packages/youtube_player_flutter_quill

  1. String videoId = YoutubePlayer.convertUrlToId("https://www.youtube.com/watch?v=BBAyRBTfsOU");
  2. YoutubePlayerController _controller = YoutubePlayerController(
  3. initialVideoId: videoId,
  4. flags: YoutubePlayerFlags(
  5. autoPlay: true,
  6. mute: true,
  7. ),
  8. );
  9. YoutubePlayer(
  10. controller: _controller,
  11. showVideoProgressIndicator: true,
  12. videoProgressIndicatorColor: Colors.amber,
  13. progressColors: ProgressColors(
  14. playedColor: Colors.amber,
  15. handleColor: Colors.amberAccent,
  16. ),
  17. onReady () {
  18. _controller.addListener(listener);
  19. },
  20. ),
展开查看全部

相关问题