Auto Fullscreen

[Limitless-Kode]

The player default to full screen when the video is played and the full screen is horizontal. I have checked the docs and nothing seems to describe how to reconfigure this behavior.

[lonalore]

I managed to get something similar working using ConstrainedBox and AspectRation inside an Expanded.

If the device is in landscape mode, I simply hide the AppBar and scale the video to fill the screen:

Here is a code snippet from my project:

import 'package:flutter/material.dart';
import 'package:vimeo_player_flutter/vimeo_player_flutter.dart';
import 'package:[MYPROJECT]/models/episode.dart';
import 'package:[MYPROJECT]/pages/components/navigation.dart';

/// Stateful Widget for Episode page.
class EpisodePage extends StatefulWidget {
  final EpisodeModel episode;
  const EpisodePage({Key? key, required this.episode}) : super(key: key);

  @override
  State<EpisodePage> createState() => _EpisodePageState();
}

/// Episode page state.
class _EpisodePageState extends State<EpisodePage> with Navigation {
  @override
  Widget build(BuildContext context) {
    var isLandscape = MediaQuery.of(context).orientation == Orientation.landscape;
    var topOffset = MediaQuery.of(context).viewPadding.top.toDouble();

    return Scaffold(
      appBar: isLandscape ? null : appBar(context, true),
      endDrawer: isLandscape ? null : appBarDrawer(context, setState),
      body: LayoutBuilder(
        builder: (context, constraints) => Padding(
          padding: const EdgeInsets.all(0),
          child: SingleChildScrollView(
            child: Column(
              children: [
                getVideoPlayer(widget.episode, constraints, isLandscape, topOffset),
                getVideoDetails(widget.episode),
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// Video player.
  Row getVideoPlayer(EpisodeModel episode, constraints, isLandscape, topOffset) {
    return Row(
      children: [
        Expanded(
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minHeight: isLandscape ? constraints.maxHeight : 0,
              maxHeight: constraints.maxHeight,
            ),
            child: AspectRatio(
              aspectRatio: 16 / 9,
              child: Container(
                padding: isLandscape ? EdgeInsets.only(top: topOffset) : const EdgeInsets.only(top: 0),
                child: VimeoPlayer(
                  videoId: episode.getVideoId(),
                ),
              ),
            ),
          ),
        )
      ],
    );
  }

  /// Video details.
  Column getVideoDetails(EpisodeModel episode) {
    return Column(
      children: [
        /// Video title.
        Container(
          padding: const EdgeInsets.only(left: 15, right: 15, bottom: 5, top: 15),
          child: Align(
            alignment: Alignment.center,
            child: Text(
              episode.getTitle(),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              softWrap: false,
              style: const TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 16.0,
              ),
            ),
          ),
        ),
        /// Video subtitle and length.
        Container(
          padding: const EdgeInsets.only(left: 15, right: 15, bottom: 15),
          child: Align(
            alignment: Alignment.center,
            child: Text(
              episode.getSubtitle() + " (" + episode.getVideoLength() + ")",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              softWrap: false,
              style: const TextStyle(
                color: Colors.black,
                fontSize: 14.0,
              ),
            ),
          ),
        ),
      ],
    );
  }
}