我的 YouTube 小部件在全屏上不断出现溢出像素

Question

我刚刚创建了一个用于播放 YouTube 视频的应用程序，但每次我将应用程序切换到全屏时，我总是底部溢出。下面是我的代码。每当我在 YouTube 视频播放时单击全屏按钮时，它总是会导致底部溢出小部件。在某些时候，我尝试使用 singlechildscrollview 但它甚至让事情变得更糟，因为屏幕上不会出现任何内容，这令人沮丧。虽然，在我的代码中，您不会看到 YouTube 网址，因为我从后端调用它并且视频实际播放，但我只是遇到了溢出像素的问题。所以在 videoUrl 中你可以放一个 youtube url 来测试它。

class OrderDone extends StatefulWidget {
  static const routeName = '/OrderDone';

  const OrderDone({Key? key}) : super(key: key);

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

class _OrderDoneState extends State<OrderDone> {
  final _quantityTextController = TextEditingController(text: '1');
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    _quantityTextController.dispose();
    super.dispose();
  }
 @override
  Widget build(BuildContext context) {
    Size size = Utils(context).getScreenSize;
    final Color color = Utils(context).color;
    final cartProvider = Provider.of<CartProvider>(context);
    final productId = ModalRoute.of(context)!.settings.arguments as String;
    final productProvider = Provider.of<ProductsProvider>(context);
    final getCurrProduct = productProvider.findProdById(productId);
    double usedPrice = getCurrProduct.isOnSale
        ? getCurrProduct.salePrice
        : getCurrProduct.price;
    double totalPrice = usedPrice * int.parse(_quantityTextController.text);
    bool? _isInCart = cartProvider.getCartItems.containsKey(getCurrProduct.id);
    final wishlistProvider = Provider.of<WishlistProvider>(context);
    bool? _isInWishlist =
        wishlistProvider.getWishlistItems.containsKey(getCurrProduct.id);
    final viewedProdProvider = Provider.of<ViewedProdProvider>(context);
    final videoURL = getCurrProduct.youtube;
    final videoID = YoutubePlayer.convertUrlToId(videoURL);

    _controller = YoutubePlayerController(
        initialVideoId: videoID!,
        flags: const YoutubePlayerFlags(autoPlay: false));

    return WillPopScope(
      onWillPop: () async {
        //  viewedProdProvider.addProductToHistory(productId: productId);

        await SystemChrome.setPreferredOrientations(
            [DeviceOrientation.portraitUp, DeviceOrientation.portraitUp]);
        return true;
      },
      child: Scaffold(
        // to remove the error that appears on the screen when you type on the keyboard
        // and navigation to details of product
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
            leading: InkWell(              borderRadius: BorderRadius.circular(12),
              onTap: () {
                SystemChrome.setPreferredOrientations([
                  DeviceOrientation.portraitUp,
                  DeviceOrientation.portraitUp
                ]);
                Navigator.canPop(context) ? Navigator.pop(context) : null;
              },
              child: Icon(
                IconlyLight.arrowLeft2,
                color: color,
                size: 24,
              ),
            ),
            elevation: 0,
            backgroundColor: Theme.of(context).scaffoldBackgroundColor),
        body: Column(children: [
          YoutubePlayer(
            controller: _controller,
            showVideoProgressIndicator: true,
            onReady: () => debugPrint('Ready'),
            bottomActions: [
              CurrentPosition(),
              ProgressBar(
                isExpanded: true,
                colors: const ProgressBarColors(
                    playedColor: Colors.green, handleColor: Colors.greenAccent),
              ),
              const PlaybackSpeedButton(),
              FullScreenButton(),
            ],
          ),
          Flexible(
            flex: 5,
            child: Container(
              decoration: BoxDecoration(
                color: Theme.of(context).cardColor,
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(40),
                  topRight: Radius.circular(40),
                ),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(
                        top: 20, left: 30, right: 30, bottom: 0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Flexible(
                          child: TextWidget(
                            text: getCurrProduct.title,
                            color: color,
                            textSize: 25,
                            isTitle: true,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding:
                        const EdgeInsets.only(top: 20, left: 30, right: 30),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        SizedBox(
                          width: 10,
                        ),
                        const Spacer(),
                      ],
                    ),
                  ),
                  const SizedBox(
                    height: 5,
                  ),
                  Container(
                    padding: const EdgeInsets.all(16.0),
                    decoration: BoxDecoration(),
                    child: TextWidget(
                      text: getCurrProduct.description,
                      color: Colors.black,
                      textSize: 18,
                      isTitle: true,
                      maxLines: 4,
                    ),
                  ),
                  const SizedBox(
                    height: 5,
                  ),
                  const Spacer(),
                ],
              ),
            ),
          )
        ]),
      ),
    );
  }
}

Answer 1

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

class OrderDone extends StatefulWidget {
  static const routeName = '/OrderDone';

  const OrderDone({Key? key}) : super(key: key);

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

class _OrderDoneState extends State<OrderDone> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    final String videoURL = "YOUR_YOUTUBE_VIDEO_URL_HERE";
    final videoID = YoutubePlayer.convertUrlToId(videoURL);

    _controller = YoutubePlayerController(
        initialVideoId: videoID!,
        flags: const YoutubePlayerFlags(autoPlay: false));

    return Scaffold(
      appBar: AppBar(
        title: Text('YouTube Player Demo'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: YoutubePlayer(
              controller: _controller,
              showVideoProgressIndicator: true,
              onReady: () => debugPrint('Ready'),
              bottomActions: [
                CurrentPosition(),
                ProgressBar(
                  isExpanded: true,
                  colors: const ProgressBarColors(
                      playedColor: Colors.green,
                      handleColor: Colors.greenAccent),
                ),
                const PlaybackSpeedButton(),
                FullScreenButton(),
              ],
            ),
          ),
          // Your other widgets can go here
        ],
      ),
    );
  }
}