Youtube_player_flutter: [BUG] Al hacer clic en el botón de controles de pantalla completa, se producen bloqueos o un comportamiento extraño solo en iOS

Creado en 8 mar. 2020 · 4Comentarios · Fuente: sarbagyastha/youtube_player_flutter

Descripción del error
Creé una aplicación de producción con este complemento y debo agradecerle todo el excelente trabajo que ha realizado con él, pero encontré un problema solo en dispositivos iOS y es cuando se hace clic en el botón de pantalla completa, la aplicación falla en algunos iOS versiones (antes de la 13) ni siquiera imprime registros de errores y en otras versiones de iOS (13) la aplicación gira pero el video sigue tartamudeando y mostrando un comportamiento extraño.
Este problema solo ocurre en dispositivos iOS, los dispositivos Android no se ven afectados en absoluto.

Código
Estoy publicando el código que estoy usando, tal vez sea un error de implementación (lo dudo ya que funciona perfectamente bien en 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, <strong i="15">@required</strong> this.youtubeController, <strong i="16">@required</strong> this.thumbnail})
      : super(key: key);

  final YoutubePlayerController youtubeController;
  final String thumbnail;

  <strong i="17">@override</strong>
  _YoutubePlayerContainerState createState() => _YoutubePlayerContainerState();
}

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

  <strong i="19">@override</strong>
  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,
            ),
          ),
        ),
    ]);
  }

  <strong i="20">@override</strong>
  void dispose() {
    widget.youtubeController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
    ]);
    super.dispose();
  }
}

Y aquí es donde llamo al widget anterior pasando el controlador

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

Detalles técnicos:

Dispositivo: iPhone (diferentes versiones)
SO: iOS 13 y antes

bug fixed

Fuente

Ayman-Kortobaa

👍1

Todos 4 comentarios

@ Ayman-Kortobaa hola, también estoy enfrentando el mismo problema, cualquier solución alternativa

srinivasii en 13 mar. 2020

👍1

@ Ayman-Kortobaa hola, también estoy enfrentando el mismo problema, cualquier solución alternativa

La única solución que realmente no logra lo que quería fue eliminar el botón de pantalla completa y hacer que la pantalla sea giratoria, los fragmentos de código están en la publicación original. Espero que alguien pueda encontrar una mejor solución o solución.

Ayman-Kortobaa en 13 mar. 2020

@srinivasii Encontré una mejor solución y funciona perfectamente, usando RotatedBox , publicaré el fragmento de código completo a continuación porque espero que ayude.
Todavía no estoy cerrando el problema, ya que el comportamiento predeterminado del complemento lo está causando.

Aquí está el código:

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, <strong i="10">@required</strong> this.youtubeController})
      : super(key: key);

  final YoutubePlayerController youtubeController;

  <strong i="11">@override</strong>
  _YoutubePlayerContainerState createState() => _YoutubePlayerContainerState();
}

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

  <strong i="13">@override</strong>
  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(),
            ),
          ),
        ],
      ),
    );
  }

  <strong i="14">@override</strong>
  void dispose() {
    widget.youtubeController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
    ]);
    super.dispose();
  }
}

Ayman-Kortobaa en 19 mar. 2020

Debería arreglarse con v7.0.0. No dude en volver a abrir si el problema persiste.