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

Answer 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.