Flutter: video not display correctly in chewie video player component

Question

the video is not display correctly at my side unless I manually go for full screen and exit full screen, really not sure what is the issue. below is the code of the screen navigated to when I click on the button from previous screen, and the screenshot

import 'package:flutter/material.dart';
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';

class VideoPlayer extends StatefulWidget {
  const VideoPlayer({
    Key? key,
  }) : super(key: key);

  @override
  State<VideoPlayer> createState() => _VideoPlayerState();
}

class _VideoPlayerState extends State<VideoPlayer> {
  final chewieController = ChewieController(
    videoPlayerController: VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4'),
    autoPlay: false,
    maxScale: 1,
    looping: false,
  );

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Chewie(
      controller: chewieController,
    )));
  }

  @override
  void dispose() {
    chewieController.dispose();
    super.dispose();
  }
}

Answer 1

Instead of Chewie, I'd rather suggest you to give a try with BetterPlayer. It has got more functionalities and works great in many scenarios.

I've worked with couple of players myself including Chewie, BetterPlayer, FlickVideoPlayer, VideoPlayer etc. Among all I found BetterPlayer best to handle video files better way with subtitles & audio track selection etc.