Flutter video player retrieve width and height of the video

Question

I am a beginner, not professional developper and I have a little project with a list of videos in a list view. I use the Chewie package to display the videos.

I use the code hereunder for chewie :

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

class ChewieListItem extends StatefulWidget {
  // This will contain the URL/asset path which we want to play
  final VideoPlayerController videoPlayerController;
  final bool looping;

  ChewieListItem({
    @required this.videoPlayerController,
    this.looping,
    Key key,
  }) : super(key: key);

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

class _ChewieListItemState extends State<ChewieListItem> {
  ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    // Wrapper on top of the videoPlayerController
    _chewieController = ChewieController(
      videoPlayerController: widget.videoPlayerController,
      aspectRatio: 16/9,
      // Prepare the video to be played and display the first frame
      autoInitialize: true,
      looping: widget.looping,
      // Errors can occur for example when trying to play a video
      // from a non-existent URL
      errorBuilder: (context, errorMessage) {
        return Center(
          child: Text(
            errorMessage,
            style: TextStyle(color: Colors.white),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {

    return Container(
      height: (MediaQuery.of(context).size.width)/16*9,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),
        color: Colors.red,
      ),
      //padding: const EdgeInsets.all(8.0),
      child: Chewie(
        controller: _chewieController,
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    // IMPORTANT to dispose of all the used resources
    widget.videoPlayerController.dispose();
    _chewieController.dispose();
  }
}

I have 2 problems : First one is that if I don't had the "height" line in the build method

height: (MediaQuery.of(context).size.width)/16*9, 

the container covers the entire screen (in portrait mode) and the video controllers are located at the bottom of the screen. Second problem is that if I flip the screen in landscape, because the size of the video is smaller than the the width of the screen my container is bigger than the video and the controllers exceed the size of the video.

I should retrieve the size of the video to adapt the parent container size but I don't figure how to do it.

I tried the following in the build method (before the return statement):

print(widget.videoPlayerController.value.size.width);

but it gave me 0.0 when I printed it.

I also have an additional problem, but not really annoying : the border radius to round the corners of the container doesn't work (in fact it is covered by the video with rectangular angles)...

Could you help me? I would appreciate.

I thank you very much in advance !

Regards

Bernard

Solution 1

@Bernard

print(widget.videoPlayerController.value.size.width);

will return null value if your video is not loaded yet.

wait for await controller.initialize() it will initialize your video and all values will get set afterwards.

Solution 2

Just wrap the "ChewieListItem Class " into the Aspect Ratio Widget as provided in the official docs of Flutter. Here is the reference of this class,

https://api.flutter.dev/flutter/widgets/AspectRatio-class.html

Then give it aspect ratio = 16 / 9 or custom how much you need

Code Example

   AspectRatio(
       aspectRatio: 16 / 9,
       child: ChewieListItem(
       videoPlayerController:
        VideoPlayerController.network(
        links[index],
        ),
        looping: false,
      ),
   ),

Comments

[Ben Hagen]

Did you verify that the video player controller is initialized before you try to get the video size? But I don't think this is what you want. In general this guide might be interesting to learn more about how constraints are handled in Flutter: flutter.dev/docs/development/ui/layout/constraints Also this issue has some discussion which might be relevant: flutter.dev/docs/development/ui/layout/constraints

[Bernard]

Hi, It seems the video player controller is initialized in the init state. I can see the video on the simulator so I suppose it is properly initialized. I suppose I have to retrieve the dimensions of the video to assign those dimensions to the parent container. My problem is that I don't know how to di it...