Воспроизведение видео на полный экран Лучший плеер Flutter

Вопрос или проблема

Воспроизведение видео на полный экран Лучший плеер Flutter

 void _initializeMediaPlayer() {
    if (widget.fileType == 'video') {
      BetterPlayerDataSource dataSource = BetterPlayerDataSource(
        BetterPlayerDataSourceType.network, // Измените это на network
        widget.downloadUrl,
      );

      _betterPlayerController = BetterPlayerController(
        const BetterPlayerConfiguration(
          aspectRatio: 16 / 9, // Настройте соотношение сторон, если необходимо
          showPlaceholderUntilPlay: true,
          expandToFill: false,
          autoPlay: true,
          fullScreenAspectRatio:
              16 / 9, // Поддерживаем соотношение сторон при полноэкранном режиме
          allowedScreenSleep: false,
          fit: BoxFit.fitWidth,
          deviceOrientationsOnFullScreen: [
            DeviceOrientation.portraitUp,
            DeviceOrientation.portraitDown,
          ],
        ),
        betterPlayerDataSource: dataSource,
      );
      setState(() {
        _isControllerInitialized = true;
      });
    } else if (widget.fileType == 'audio') {
      _audioPlayer.setSourceUrl(widget.downloadUrl).then((_) {
        _audioPlayer.play(UrlSource(widget.downloadUrl));
        setState(() {
          _isPlaying = true;
        });
      });
    }
  }

videoPlayerWidget() {
      return Container(
        padding: const EdgeInsets.all(
          10,
        ), // Добавьте немного отступа вокруг видеоплеера
        child: _isControllerInitialized
            ? BetterPlayer(
                controller: _betterPlayerController!,
              )
            : const Text("Нет доступного видео"),
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.black,
        child: Stack(
          children: [
            _uploaderDetails == null
                ? Text(
                    "Загрузка деталей...",
                    style: TextStyle(color: Colors.white),
                  )
                : SingleChildScrollView(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        if (widget.fileType == 'video')
                          _betterPlayerController != null &&
                                  _isControllerInitialized
                              ? videoPlayerWidget()
                              : Text(
                                  "Загрузка видео...",
                                  style: TextStyle(color: Colors.white),
                                ),
                        if (widget.fileType == 'audio') audioWidget(),
                      ],
                    ),
                  ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Container(
                padding: EdgeInsets.only(bottom: 25.0, left: 20.0),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.bottomCenter,
                    end: Alignment.topCenter,
                    colors: [
                      Colors.black
                          .withOpacity(0.8), // Более непрозрачный внизу
                      Colors.transparent, // Постепенно становится прозрачным
                    ],
                  ),
                  borderRadius: BorderRadius.circular(
                      0.0), // Единообразное округление со всех сторон
                ),
                child: widget.fileType == 'video'
                    ? userDetailsOverlay()
                    : Container(), // Отображать оверлей с деталями пользователя только для видео
              ),
            ),
          ],
        ),
      ),
    );
    ```

Ответ или решение

Чтобы воспроизводить видео на полном экране в вашем приложении Flutter с использованием библиотеки Better Player, нужно внести несколько изменений и убедиться, что настройки правильно применены. Я приведу вам полное решение, чтобы было легче достичь желаемого результата.

Полное решение

1. Обновите конфигурацию Better Player: Убедитесь, что в конфигурации рано установлены необходимые параметры для полноэкранного режима. Также нужно убедиться, что при переходе в полноэкранный режим, видео действительно занимает весь экран.

2. Создание виджета полноэкранного видео: Вам нужно настроить метод videoPlayerWidget, чтобы он занимал весь экран.

3. Обработка изменения ориентации устройства: Добавьте код для обработки смены ориентации устройства, чтобы видео корректно отображалось в полноэкранном режиме.

Вот доработанная версия вашего кода:

void _initializeMediaPlayer() {
  if (widget.fileType == 'video') {
    BetterPlayerDataSource dataSource = BetterPlayerDataSource(
      BetterPlayerDataSourceType.network,
      widget.downloadUrl,
    );

    _betterPlayerController = BetterPlayerController(
      BetterPlayerConfiguration(
        aspectRatio: 1, // Используем 1 если видео в портретном режиме
        showPlaceholderUntilPlay: true,
        autoPlay: true,
        fullScreenAspectRatio: 1, // Соотношение для полноэкранного режима
        allowedScreenSleep: false,
        deviceOrientationsOnFullScreen: [
          DeviceOrientation.portraitUp,
          DeviceOrientation.portraitDown,
        ],
      ),
      betterPlayerDataSource: dataSource,
    );
    setState(() {
      _isControllerInitialized = true;
    });
  } else if (widget.fileType == 'audio') {
    _audioPlayer.setSourceUrl(widget.downloadUrl).then((_) {
      _audioPlayer.play(UrlSource(widget.downloadUrl));
      setState(() {
        _isPlaying = true;
      });
    });
  }
}

videoPlayerWidget() {
  return Container(
    height: MediaQuery.of(context).size.height, // Занимаем всю высоту экрана
    width: MediaQuery.of(context).size.width, // Занимаем всю ширину экрана
    child: _isControllerInitialized
        ? BetterPlayer(
            controller: _betterPlayerController!,
          )
        : const Center(child: CircularProgressIndicator()), // Индикатор загрузки
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Container(
      color: Colors.black,
      child: Stack(
        children: [
          _uploaderDetails == null
              ? Center(
                  child: Text(
                    "Loading details...",
                    style: TextStyle(color: Colors.white),
                  ),
                )
              : SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      if (widget.fileType == 'video') 
                        _betterPlayerController != null && _isControllerInitialized
                            ? videoPlayerWidget()
                            : Center(child: Text(
                                "Loading video...",
                                style: TextStyle(color: Colors.white),
                              )),
                      if (widget.fileType == 'audio') audioWidget(),
                    ],
                  ),
                ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              padding: EdgeInsets.only(bottom: 25.0, left: 20.0),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.bottomCenter,
                  end: Alignment.topCenter,
                  colors: [
                    Colors.black.withOpacity(0.8),
                    Colors.transparent,
                  ],
                ),
                borderRadius: BorderRadius.circular(0.0),
              ),
              child: widget.fileType == 'video'
                  ? userDetailsOverlay()
                  : Container(),
            ),
          ),
        ],
      ),
    ),
  );
}

Пояснения к изменениям

1. Соотношение сторон: Я изменил значение aspectRatio на 1, если ваше видео в портретном формате. Это позволит уменьшить искажённость при отображении видео.

2. Размер виджета видео: Я обновил videoPlayerWidget, чтобы он занимал всю высоту и ширину экрана. Это почти гарантирует, что видео будет максимально большим.

3. Индикатор загрузки: В случае, если видео еще не инициализировано, я добавил виджет CircularProgressIndicator, чтобы улучшить пользовательский интерфейс.

После внесения этих изменений, видео должно воспроизводиться на полный экран, подобно тому, как это реализовано в TikTok. Убедитесь также, что у вас есть все необходимые разрешения для работы с экраном, если ваше видео полностью занимает экран.