Flutter YouTube Player在AppBar上重叠视频

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

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

class YoutubeVideoPlayer extends YoutubePlayer {
  YoutubeVideoPlayer(BuildContext context,
      {Key? key, required YoutubePlayerController controller})
      : super(
          key: ObjectKey(controller.initialVideoId),
          controller: controller,
          showVideoProgressIndicator: true,
          progressIndicatorColor: context.colorScheme.primary,
          aspectRatio: context.width(.2) / context.height(.054),
          bottomActions: [
            CurrentPosition(),
            const SizedBox(width: 10.0),
            ProgressBar(isExpanded: true),
            const SizedBox(width: 10.0),
            FullScreenButton(),
          ],
        );
}
import 'package:auto_route/auto_route.dart';
import 'package:doktorumsun_app/core/extension/context_extension.dart';
import 'package:doktorumsun_app/product/constant/count_constant.dart';
import 'package:doktorumsun_app/product/widget/player/youtebe_video_player.dart';
import 'package:doktorumsun_app/product/widget/text/text_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:visibility_detector/visibility_detector.dart';

import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class YoutubeVideo extends StatefulWidget {
  final String? subtitle;
  final String videoKey;

  const YoutubeVideo({super.key, required this.videoKey, this.subtitle});

  @override
  State<YoutubeVideo> createState() => _YoutubeVideoState();
}

class _YoutubeVideoState extends State<YoutubeVideo> {
  late YoutubePlayerController _controller;
  late TextEditingController _idController;
  late TextEditingController _seekToController;

  bool isFullScreen = true;
  final bool _isPlayerReady = false;

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    _controller = YoutubePlayerController(
      /*  */
      initialVideoId: widget.videoKey,
      flags: const YoutubePlayerFlags(
        hideControls: true,
        mute: false,
        autoPlay: false,
        disableDragSeek: false,
        useHybridComposition: false,
        showLiveFullscreenButton: false,
        loop: false,
        controlsVisibleAtStart: false,
        isLive: false,
        forceHD: false,
        enableCaption: false,
      ),
    )..addListener(listener);
    _idController = TextEditingController();
    _seekToController = TextEditingController();
  }

  void listener() {
    if (_isPlayerReady && mounted && !_controller.value.isFullScreen) {
      setState(() {});
    }
  }

  @override
  void deactivate() {
    // Pauses video while navigating to next page.
    _controller.pause();
    super.deactivate();
  }

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

  @override
  Widget build(BuildContext context) {
    return VisibilityDetector(
      key: const Key("youtube-vide"),
      onVisibilityChanged: (info) {
        if (info.visibleFraction == 0) {
          _controller.pause();
        } else {
          _controller.value.isPlaying
              ? _controller.play()
              : _controller.pause();
        }
      },
      child: Column(
        children: [
          _youtubeVideoPlayer(context),
          if (_controller.value.isFullScreen == false)
            Padding(
              padding: context.paddingAll(6),
              child: TextWidget.subtitle(
                text: widget.subtitle ?? '',
                fontWeight: FontWeight.bold,
                maxLines: CountConstant.two,
                textAlign: TextAlign.center,
              ),
            )
        ],
      ),
    );
  }

  YoutubePlayerBuilder _youtubeVideoPlayer(BuildContext context) {
    return YoutubePlayerBuilder(
      player: YoutubeVideoPlayer(
        context,
        controller: _controller,
      ),
      builder: (context, player) {
        _controller = YoutubePlayerController(
          initialVideoId: widget.videoKey,
          flags: const YoutubePlayerFlags(
            autoPlay: true,
          ),
        );
        return InkWell(
            onTap: () {
              showGeneralDialog(
                context: context,
                pageBuilder: (context, animation, secondaryAnimation) => Dialog(
                  insetPadding: EdgeInsets.zero,
                  child: Stack(
                    children: [
                      GestureDetector(
                        onVerticalDragEnd: (DragEndDetails details) {
                          if (details.primaryVelocity! > 0) {
                            context.router.pop();
                            SystemChrome.setPreferredOrientations([
                              DeviceOrientation.portraitUp,
                            ]);
                          }
                        },
                        child: YoutubePlayer(
                          controller: _controller,
                        ),
                      ),
                      Positioned(
                        right: CountConstant.zero.toDouble(),
                        child: IconButton(
                            onPressed: () {
                              SystemChrome.setPreferredOrientations([
                                DeviceOrientation.portraitUp,
                              ]);
                              context.popRoute();
                            },
                            icon: const DecoratedBox(
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle, color: Colors.red),
                              child: Icon(
                                Icons.close,
                                color: Colors.white,
                              ),
                            )),
                      ),
                    ],
                  ),
                ),
              );
            },
            child: player);
      },
    );
  }
}
vuktfyat

vuktfyat1#

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

String videoId = YoutubePlayer.convertUrlToId("https://www.youtube.com/watch?v=BBAyRBTfsOU");
YoutubePlayerController _controller = YoutubePlayerController(
    initialVideoId: videoId,
    flags: YoutubePlayerFlags(
        autoPlay: true,
        mute: true,
    ),
);

YoutubePlayer(
    controller: _controller,
    showVideoProgressIndicator: true,
    videoProgressIndicatorColor: Colors.amber,
    progressColors: ProgressColors(
        playedColor: Colors.amber,
        handleColor: Colors.amberAccent,
    ),
    onReady () {
        _controller.addListener(listener);
    },
),

相关问题