My youtube widget keeps getting overflow pixels on full screen

Question

I just created an app for playing youtube videos but each time I toggle the app to full screen, I keep getting bottom overflowed. Here is my code below. Anytime I click on the fullscreen button when the youtube video is playing, it always lead to a bottom overflow widget. At some point I tried using singlechildscrollview But it even made matters worse as nothing would appear on the screen which is so frustrating. Although, in my codes you would not see the youtube Url thats because am calling it from a backend and the video actually plays but I just have issues with that overflow pixel. So in the videoUrl you can put a youtube url to test it.

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
        ],
      ),
    );
  }
}