How to get smooth scrolling without taking time in loading video in tik tok clone app in flutter

134 views Asked by At

Here is my code

first of all I make list of all videos Info and urls and then make list view of video player and pass these urls one by one to video player of each video according to their index in the list.

  1. this is video urls array
List<String> AllVideosUrls = [
           "videoUrl1",
           "videoUrl2",
           "videoUrl3",
           "videoUrl3",
           "videoUrl4",
]
  1. this is list view of video player
return PageView.builder(
            itemCount: AllVideosUrls.length,
            controller: PageController(initialPage: 0, viewportFraction: 1),
            scrollDirection: Axis.vertical,
            itemBuilder: ((context, index) {
              final eachVideoUrl = AllVideosUrls[index];

              return VideoPlayer(
                      videoFileUrl: eachVideoUrl()
                      );
              }
             ),
            )
  1. this is video player widget
class VideoPlayer extends StatefulWidget {
  final String videoFileUrl;

  const HomeVideoPlayer({
    super.key,
    required this.videoFileUrl,
  });

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

class _VideoPlayerState extends State<VideoPlayer> {

  VideoPlayerController? playerController;

  bool isPlayerInitialized = true;

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

    playerController = VideoPlayerController.network(widget.videoFileUrl)
      ..initialize().then((value) {
        setState(() {
          isPlayerInitialized = false;
        });

        playerController!.play();
        playerController!.setLooping(true);
        playerController!.setVolume(2);
      });
  }

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

    playerController!.dispose();
  }

  @override
  Widget build(BuildContext context) {
      return Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              decoration: const BoxDecoration(
                color: Colors.black,
              ),
              child: Center(
                child: AspectRatio(
                  aspectRatio: playerController!.value.aspectRatio,
                  child: VideoPlayer(playerController!),
                ),
              ),
            );
           }
         }

I want that the videos should download already when I watch present video so this reduce the loading when we scroll up to next video.

0

There are 0 answers