[BUG] Youtube player full screen and Slivers in Flutter

[filippodicostanzo]

Describe the bug In my app i have a layout made with flutter sliver with appbar and sliverboxtoadapter When i try to play a video in full screen mode the video doesn't open to full screen because it is dominated by the sliver layout

This is my code

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:tabapp/components/pastry_card.dart';
import 'package:tabapp/utils/functions.dart';
import 'package:rflutter_alert/rflutter_alert.dart';
import 'package:html/parser.dart' as htmlparser;
import 'package:html/dom.dart' as dom;
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class RecipeDetails extends StatelessWidget {
  const RecipeDetails({Key? key, this.recipe}) : super(key: key);
  final dynamic recipe;

  @override
  Widget build(BuildContext context) {
    YoutubePlayerController _controller = YoutubePlayerController(
      initialVideoId: 'iLnmTe5Q2Qw',
      flags: YoutubePlayerFlags(
        autoPlay: true,
      ),
    );

    String htmlData = """<div>
  <h1>Demo Page</h1>
  <p>This is a fantastic product that you should buy!</p>
  <h3>Features</h3>
  <ul>
    <li>It actually works</li>
    <li>It exists</li>
    <li>It doesn't cost much!</li>
  </ul>
  <!--You can pretty much put any html in here!-->
</div>""";
    dom.Document datax = htmlparser.parse(htmlData);

    print(recipe);
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            leading: IconButton(
                icon: const Icon(Icons.arrow_back),
                onPressed: () {
                  Navigator.pop(context);
                }),
            expandedHeight: 220.0,
            floating: false,
            pinned: true,
            elevation: 50,
            backgroundColor: Colors.grey,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                recipe['title'],
                style: const TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 16.0,
                ),
              ),
              background: Stack(
                fit: StackFit.expand,
                children: [
                  Image.asset(
                    'assets/images/' + recipe['image'],
                    fit: BoxFit.cover,
                  ),
                  const DecoratedBox(
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment(0.0, 0.5),
                            end: Alignment(0.0, 0.0),
                            colors: [
                          Color(0x60000000),
                          Color(0x00000000),
                        ])),
                  ),
                ],
              ),
            ),
          ),
          const SliverToBoxAdapter(
            child: Text('ada'),
          ),
          SliverToBoxAdapter(
            child: Html(
              data: recipe['description'],
              style: {".title": Style(textAlign: TextAlign.center)},
            ),
          ),
          SliverToBoxAdapter(
            child: YoutubePlayerBuilder(
              player: YoutubePlayer(
                controller: _controller,
                showVideoProgressIndicator: true,
              ),
              builder: (context, player) {
                return Column(
                  children: [
                    // some widgets
                    player,
                    //some other widgets
                  ],
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

[Cank256]

Any solutions to this? I am facing the same problem.

[Cank256]

What I did was make the video to show in a dialogue so that it is separate from Slivers which helped in achieving the full screen mode with ease.

[koperdasV]

Що я зробив, так це змусив відео відображатися в діалоговому вікні, щоб воно було окремо від Slivers, що допомогло з легкістю отримати повноекранний режим.

hi, could you please demonstrate the code. faced the same problem