Youtube_player_flutter: [BUG] Clicking the fullscreen controls button causes crashes or weird behavior on iOS only

Created on 8 Mar 2020  路  4Comments  路  Source: sarbagyastha/youtube_player_flutter

Bug description
I have created a production app using this plugin and I have to thank you for all the great work you have done with it, but I found an issue on iOS devices only and that is when the fullscreen button is clicked the app crashes on some iOS versions (before 13) it doesn't even print error logs and on other iOS versions (13) the app rotates but the video keeps stuttering and showing weird behavior.
This issue only happens on iOS devices, Android devices are not affected by it at all.

Code
I am posting the code I am using, maybe it is an implementation error (I doubt it since it works perfectly fine on Android)

youtube_player.dart

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

class YoutubePlayerContainer extends StatefulWidget {
  const YoutubePlayerContainer(
      {Key key, @required this.youtubeController, @required this.thumbnail})
      : super(key: key);

  final YoutubePlayerController youtubeController;
  final String thumbnail;

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

class _YoutubePlayerContainerState extends State<YoutubePlayerContainer> {
  bool loading;
  @override
  void initState() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight
    ]);
    loading = true;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Center(
        child: YoutubePlayer(
          bottomActions: <Widget>[
            CurrentPosition(),
            ProgressBar(isExpanded: true),
          ],
          controller: widget.youtubeController,
          showVideoProgressIndicator: true,
          onReady: () async {
            await Future.delayed(Duration(milliseconds: 700));
            setState(() {
              loading = false;
            });
          },
          progressIndicatorColor: Theme.of(context).primaryColor,
        ),
      ),
      if (loading)
        Center(
          child: Container(
            height: 60,
            width: 60,
            child: CircularProgressIndicator(
              strokeWidth: 6,
            ),
          ),
        ),
    ]);
  }

  @override
  void dispose() {
    widget.youtubeController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
    ]);
    super.dispose();
  }
}

And here is where I call the previous widget passing in the controller

YoutubePlayerContainer(
                          thumbnail: thumbnail,
                          youtubeController: YoutubePlayerController(
                              initialVideoId:
                                  YoutubePlayer.convertUrlToId(videoUrl),
                              flags: YoutubePlayerFlags(enableCaption: false)),
                        )

Technical Details:

  • Device: iPhone (different versions)
  • OS: iOS 13 and before
bug fixed

All 4 comments

@Ayman-Kortobaa hi, I am also facing the same issue, any work around solution

@Ayman-Kortobaa hi, I am also facing the same issue, any work around solution

The only workaround which really doesn't achieve what I wanted was to remove the fullscreen button and make the screen rotatable, the code snippets are in the original post. I hope someone can find a better workaround or a solution.

@srinivasii I have found a better workaround and it works perfectly, using RotatedBox, I'll post the whole code snippet below because I hope that it helps.
I am not closing the issue yet as the default behaviour of the plugin is causing it.

Here's the code:

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

class YoutubePlayerContainer extends StatefulWidget {
  const YoutubePlayerContainer({Key key, @required this.youtubeController})
      : super(key: key);

  final YoutubePlayerController youtubeController;

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

class _YoutubePlayerContainerState extends State<YoutubePlayerContainer> {
  int _rotation;
  @override
  void initState() {
    _rotation = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return RotatedBox(
      quarterTurns: _rotation,
      child: Stack(
        children: <Widget>[
          SizedBox.expand(
            child: YoutubePlayer(
              bottomActions: <Widget>[
                IconButton(
                  icon: Icon(
                    _rotation == 0 ? Icons.fullscreen : Icons.fullscreen_exit,
                    color: Colors.white,
                  ),
                  onPressed: () async {
                    widget.youtubeController.pause();
                    if (_rotation == 0) {
                      setState(() {
                        _rotation = 1;
                      });
                    } else {
                      setState(() {
                        _rotation = 0;
                      });
                    }
                  },
                ),
                RemainingDuration(),
                ProgressBar(isExpanded: true),
                CurrentPosition(),
              ],
              controller: widget.youtubeController,
              showVideoProgressIndicator: true,
              progressIndicatorColor: Theme.of(context).primaryColor,
            ),
          ),
          Align(
            alignment: Alignment.topRight,
            child: IconButton(
              icon: Icon(
                Icons.close,
                color: Colors.white,
              ),
              onPressed: () => Navigator.of(context).pop(),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    widget.youtubeController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
    ]);
    super.dispose();
  }
}

Should fix with v7.0.0. Feel free to reopen if the issue persists.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kyawsithu picture kyawsithu  路  4Comments

jimmyff picture jimmyff  路  3Comments

madhu-1stmain picture madhu-1stmain  路  5Comments

SayaGames picture SayaGames  路  3Comments

kulture-rob-snider picture kulture-rob-snider  路  5Comments