Need help to make Flutter Custom Video Player

Question

I need help to make a custom video player like it .

When we tap on the video or in the icon above the video, the video changes simultaneously with the time. Using flutter package video_player I made that part only here .

But there I have a tons of issues. Also when I trying to add VideoPlayerController.network('~~~~~~'); not working.

Can anyone help me?

• My video player code
  video_player.dart

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

class AssetVideo extends StatefulWidget {
  @override
  AssetVideoState createState() => AssetVideoState();
}

class AssetVideoState extends State<AssetVideo> {
  VideoPlayerController? _controller1, _controller2;
  bool x = true;

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

  void playVideo1() {
    _controller1 = VideoPlayerController.assets(
        'assets/v3.mp4');
    _controller1!.addListener(() {
      setState(() {});
    });
    _controller1!.setLooping(true);
    _controller1!.initialize().then((_) => setState(() {}));
    _controller1!.play();
  }

  playVideo2() {
    _controller2 = VideoPlayerController.assets(
        'assets/sample.mp4');

    _controller2!.addListener(() {
      setState(() {});
    });
    _controller2!.setLooping(true);
    _controller2!.initialize().then((_) => setState(() {}));
    // _controller2!.pause();
    _controller2!.play();
  }

  @override
  void dispose() {
    _controller1!.dispose();
    _controller2!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          _controller2!.value.isPlaying
              ? AspectRatio(
                  aspectRatio: _controller2!.value.aspectRatio,
                  child: Stack(
                    alignment: Alignment.bottomCenter,
                    children: [
                      VideoPlayer(_controller2!.value.isPlaying
                          ? _controller2!
                          : _controller1!),
                      VideoController(
                        controller: _controller2!.value.isPlaying
                            ? _controller2!
                            : _controller1!,
                      ),
                      VideoProgressIndicator(
                          _controller2!.value.isPlaying
                              ? _controller2!
                              : _controller1!,
                          allowScrubbing: false),
                    ],
                  ),
                )
              : AspectRatio(
                  aspectRatio: _controller1!.value.aspectRatio,
                  child: Stack(
                    alignment: Alignment.bottomCenter,
                    children: [
                      VideoPlayer(_controller1!),
                      VideoController(
                        controller: _controller1!,
                      ),
                      VideoProgressIndicator(_controller1!,
                          allowScrubbing: false),
                    ],
                  ),
                ),
        ],
      ),
    );
  }
}

class VideoController extends StatefulWidget {
  final VideoPlayerController controller;
  final VideoPlayerController? controller2;
  static const _examplePlaybackRates = [
    0.25,
    0.5,
    1.0,
    1.5,
    2.0,
    3.0,
    5.0,
    10.0,
  ];

  const VideoController({
    required this.controller,
    this.controller2,
  });

  @override
  State<VideoController> createState() => VideoControllerState();
}

class VideoControllerState extends State<VideoController> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AnimatedSwitcher(
          duration: const Duration(milliseconds: 50),
          reverseDuration: const Duration(milliseconds: 200),
          child: widget.controller.value.isPlaying
              ? const SizedBox.shrink()
              : Container(
                  color: Colors.black26,
                  child: const Center(
                    child: Icon(
                      Icons.play_arrow,
                      color: Colors.white,
                      size: 100.0,
                      semanticLabel: 'Play',
                    ),
                  ),
                ),
        ),
        GestureDetector(onTap: () {
          widget.controller.value.isPlaying
              ? widget.controller.pause()
              : widget.controller.play();
        }),
      ],
    );
  }
}