Flutter - How to set the Height ratio of the video to chewie

shecincrr
February 5, 2024
90 views
0 votes
2 Answers

I’m trying to create a kind of feed such as Insta. I have a widget video that I need to have a height set depending of the ratio of the video, but couldn’t find a solution.

The actual issue is that I’m working on FlutterFlow, which has a video widget that does not allow to mute the video. So I’m trying to create a video widget that will loop, with auto-play, sound off, and that will have 100% width and the height should be calculate form the ratio to fit each video into the feed.

class CustomVidPlayerCopy extends StatefulWidget {
  CustomVidPlayerCopy({
    this.width,
    this.height,
    required this.videoPath,
  });

  final double? width;
  final double? height;
  final String videoPath;

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

// Define the state for the CustomVidPlayer widget
class _CustomVidPlayerState extends State<CustomVidPlayerCopy> {
  late VideoPlayerController _videoPlayerController;
  late ChewieController _chewieController;
  bool _isVideoPlaying = false;

  @override
  void initState() {
    super.initState();
    // Initialize the VideoPlayerController with the provided videoPath
    _videoPlayerController =
        VideoPlayerController.networkUrl(Uri.parse(widget.videoPath));
    _videoPlayerController.setVolume(0.0);
    _videoPlayerController.initialize().then((_) {
      setState(() {});
      // Initialize the ChewieController
      _chewieController = ChewieController(
        videoPlayerController: _videoPlayerController,
        aspectRatio: _videoPlayerController.value.aspectRatio,
        looping: true,
        showControls: false,
        // Set the loading indicator's color
        materialProgressColors: ChewieProgressColors(
          playedColor: Colors.pink, // You can set a default color here
          handleColor: Colors.pink, // You can set a default color here
        ),
      );
    });
  }

  @override
  void dispose() {
    // Dispose of the video and Chewie controllers
    _videoPlayerController.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return VisibilityDetector(
      key: Key(widget.videoPath),
      onVisibilityChanged: (visibilityInfo) {
        // Play or pause the video based on visibility
        if (visibilityInfo.visibleFraction >= 1) {
          _videoPlayerController.play();
        } else {
          _videoPlayerController.pause();
        }
      },
      child: Container(
        child: _videoPlayerController.value.isInitialized
            ? Stack(
                children: [
                  // Display the video using Chewie
                  Chewie(
                    controller: _chewieController,
                  ),
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                  ),
                ],
              )
            : Center(
                child: CircularProgressIndicator(),
              ),
      ),
    );
  }
}

I tried adding this to my code but the scroll Up get jerky after that:

// Set default width, height, aspect ratio
  double get width => widget.width == null || widget.width! >= double.infinity
      ? MediaQuery.sizeOf(context).width
      : widget.width!;

  double get height =>
      widget.height == null || widget.height! >= double.infinity
          ? width / aspectRatio
          : widget.height!;

  double get aspectRatio =>
      _chewieController.videoPlayerController.value.aspectRatio;

Answers

Chosen as BEST ANSWER

I actually fixed the height issue, but I still get an issue when scrolling up.

Error

class CustomVidPlayerCopy extends StatefulWidget {
  CustomVidPlayerCopy({
    this.width,
    this.height,
    required this.videoPath,
  });

  final double? width;
  final double? height;
  final String videoPath;

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

class _CustomVidPlayerState extends State<CustomVidPlayerCopy> {
  late VideoPlayerController _videoPlayerController;
  late ChewieController _chewieController;
  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();
    _videoPlayerController = VideoPlayerController.network(widget.videoPath);
    _initializeVideoPlayerFuture = _videoPlayerController.initialize();
    _videoPlayerController.setVolume(0.0);
  }

  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _initializeVideoPlayerFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          _chewieController = ChewieController(
            videoPlayerController: _videoPlayerController,
            aspectRatio: _videoPlayerController.value.aspectRatio,
            autoInitialize: true,
            looping: true,
            showControls: false,
            autoPlay: true,
          );

          return Container(
            width: widget.width ?? MediaQuery.of(context).size.width.toDouble(),
            child: AspectRatio(
              aspectRatio: _videoPlayerController.value.aspectRatio,
              child: Stack(
                children: [
                  // Display the video using Chewie
                  Chewie(
                    controller: _chewieController,
                  ),
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                  ),
                ],
              ),
            ),
          );
        } else {
          return Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }
}

(Edit)

Dynamically calculate the height based on the aspect ratio of the video.
Try using below code:

class CustomVidPlayerCopy extends StatefulWidget {
  CustomVidPlayerCopy({
    this.width,
    required this.videoPath,
  });

  final double? width;
  final String videoPath;

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

class _CustomVidPlayerState extends State<CustomVidPlayerCopy> {
  late VideoPlayerController _videoPlayerController;
  late ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    _videoPlayerController =
        VideoPlayerController.network(widget.videoPath);
    _videoPlayerController.setVolume(0.0);
    _videoPlayerController.initialize().then((_) {
      setState(() {});
      _chewieController = ChewieController(
        videoPlayerController: _videoPlayerController,
        aspectRatio: _videoPlayerController.value.aspectRatio,
        autoInitialize: true,
        looping: true,
        showControls: false,
        autoPlay: true,
      );
    });
  }

  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return VisibilityDetector(
      key: Key(widget.videoPath),
      onVisibilityChanged: (visibilityInfo) {
        if (visibilityInfo.visibleFraction >= 1) {
          _videoPlayerController.play();
        } else {
          _videoPlayerController.pause();
        }
      },
      child: Container(
        width: widget.width ?? MediaQuery.of(context).size.width,
        height: (widget.width ?? MediaQuery.of(context).size.width) /
            _chewieController.aspectRatio,
        child: _videoPlayerController.value.isInitialized
            ? Chewie(
                controller: _chewieController,
              )
            : Center(
                child: CircularProgressIndicator(),
              ),
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – How to set the Height ratio of the video to chewie

Answers