Load video same as tiktok or Instagram in flutter

Question

I am creating on video scrolling app here I have multiple videos. so i am having an issue is when I scroll through the video it takes a loading and then plays the video and if scroll back to the same video then again it's loads and then plays. and if i scroll fastly then video controller crashing and not work properly.

I've used pageview builder to scroll vertically and I don't know what the best solution is for that. ive write some code in onPageChanged Even that's why i guess its loading much so i am looking for best solution for that

Here is my Code

Image of Design

onPageChange event

  onPageChanged(index) async {
    videoPlayerController!.value.dispose();
    videoPlayerController!.value =
        VideoPlayerController.network(widget.videosList[index]["video_link"]);

    videoPlayerController!.value.setLooping(true);
    videoPlayerController!.value.initialize().then(
      (_) {
        if (isAutoplay.value == true) {
          videoPlayerGetXController.isPlaying.value = true;
          videoPlayerController!.value.play();
          log(videoPlayerController!.value.value.size.toString());
        } else {
          videoPlayerGetXController.isPlaying.value = false;
        }
        videoPlayerGetXController.update();
      },
    );
    PipFlutterPlayerDataSource dataSource = PipFlutterPlayerDataSource(
      PipFlutterPlayerDataSourceType.network,
      widget.videosList[index]["video_link"],
    );
    videoPlayerGetXController.pipFlutterPlayerController.value =
        PipFlutterPlayerController(
      PipFlutterPlayerConfiguration(
        eventListener: (PipFlutterPlayerEvent value) {
          if (PipFlutterPlayerEventType.pipStart ==
              value.pipFlutterPlayerEventType) {
            videoPlayerGetXController.pipFlutterPlayerController.value.play();
          }
          if (PipFlutterPlayerEventType.pipStop ==
              value.pipFlutterPlayerEventType) {
            videoPlayerGetXController.pipFlutterPlayerController.value.pause();
          }
        },
        aspectRatio: 9 / 16,
        fit: BoxFit.contain,
        controlsConfiguration: const PipFlutterPlayerControlsConfiguration(
          enablePlayPause: false,
        ),
        // autoPlay: true,
        deviceOrientationsAfterFullScreen: [DeviceOrientation.portraitUp],
        deviceOrientationsOnFullScreen: [DeviceOrientation.portraitUp],
      ),
    );
    videoPlayerGetXController.pipFlutterPlayerController.value
        .setupDataSource(dataSource);
    videoPlayerGetXController.pipFlutterPlayerController.value
        .setPipFlutterPlayerGlobalKey(
            videoPlayerGetXController.pipFlutterPlayerKey);
    // videoController.pipFlutterPlayerController.value.pause();
    videoPlayerGetXController.update();
  }

Page View Builder Code

PageView.builder(
                    controller: widget.pageController.value,
                    onPageChanged: (index) async {
                      onPageChanged(index);
                    },
                    scrollDirection: Axis.vertical,
                    itemCount: widget.videosList.length,
                    itemBuilder: (context, i) {
                      pageindex = i;

                      // Future.delayed(const Duration(seconds: 1));
                      return videoPlayerGetXController
                              .pipFlutterPlayerController.value.isFullScreen
                          ? Stack(
                              children: [
                                Container(
                                  height: 1,
                                  width: 1,
                                  color: purpleColor,
                                  child: PipFlutterPlayer(
                                    controller: videoPlayerGetXController
                                        .pipFlutterPlayerController.value,
                                    key: videoPlayerGetXController
                                        .pipFlutterPlayerKey,
                                  ),
                                ),
                                VideoPlayer(videoPlayerController!.value)
                              ],
                            )
                          : InkWell(
                              onTap: () {
                                if (videoPlayerController!
                                    .value.value.isPlaying) {
                                  videoPlayerGetXController.isPlaying.value =
                                      false;
                                  videoPlayerController!.value.pause();
                                } else {
                                  videoPlayerGetXController.isPlaying.value =
                                      true;
                                  videoPlayerController!.value.play();
                                }
                                // videoPlayerGetXController.update();
                              },
                              child: Stack(
                                children: [
                                  Container(
                                    height: MediaQuery.of(context).size.height,
                                    width: MediaQuery.of(context).size.width,
                                    color: primaryBlack,
                                    child: Stack(
                                      alignment: Alignment.center,
                                      children: [
                                        if (videoPlayerController!
                                            .value.value.isInitialized)
                                          SizedBox(
                                            height: 0,
                                            width: 0,
                                            child: PipFlutterPlayer(
                                              controller:
                                                  videoPlayerGetXController
                                                      .pipFlutterPlayerController
                                                      .value,
                                              key: videoPlayerGetXController
                                                  .pipFlutterPlayerKey,
                                            ),
                                          ),
                                        videoPlayerController!
                                                .value.value.isInitialized
                                            ? VideoPlayer(
                                                videoPlayerController!.value)
                                            : Container(),
                                        Positioned(
                                          bottom: widget.fromHomePage == true
                                              ? Get.height * 0.1
                                              : 20,
                                          child: SizedBox(
                                            height: 8,
                                            width: Get.width,
                                            child: VideoProgressIndicator(
                                              videoPlayerController!.value,
                                              allowScrubbing: true,
                                              colors: const VideoProgressColors(
                                                bufferedColor: primaryWhite,
                                                backgroundColor: primaryWhite,
                                                playedColor: purpleColor,
                                              ),
                                            ),
                                          ),
                                        ),
                                        if (widget.fromHomePage != true)
                                          Positioned(
                                            top: 10,
                                            left: 10,
                                            child: GestureDetector(
                                              onTap: () {
                                                Get.back();
                                              },
                                              child: Container(
                                                margin:
                                                    const EdgeInsets.symmetric(
                                                        horizontal: 20,
                                                        vertical: 40),
                                                height: 50,
                                                width: 50,
                                                decoration: BoxDecoration(
                                                  color: whiteColor
                                                      .withOpacity(.2),
                                                  borderRadius:
                                                      BorderRadius.circular(12),
                                                ),
                                                child: const Icon(
                                                  Icons
                                                      .arrow_back_ios_new_outlined,
                                                  size: 16,
                                                  color: primaryWhite,
                                                ),
                                              ),
                                            ),
                                          ),
                                      ],
                                    ),
                                  ),

                                  // if (!videoPlayerGetXController
                                  //     .isPlaying.value)
                                  // const Center(
                                  //   child: Icon(
                                  //     Icons.play_arrow,
                                  //     color: primaryWhite,
                                  //     size: 50,
                                  //   ),
                                  // ),
                                ],
                              ),
                            );
                    },
                  ),

Answer 1

You can use this widget for video. just pass the URL of the video and it will work fine.

Add these two plugins in pubspec

https://pub.dev/packages/chewie and https://pub.dev/packages/video_player

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

class VideoWidget extends StatefulWidget {
  final String url;

  const VideoWidget({required this.url});

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

class _VideoWidgetState extends State<VideoWidget> {
  late VideoPlayerController videoPlayerController;

  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();
    videoPlayerController =
        new VideoPlayerController.networkUrl(Uri.parse(widget.url));

    _initializeVideoPlayerFuture = videoPlayerController.initialize().then((_) {
      //       Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
      setState(() {});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _initializeVideoPlayerFuture,
      builder: (context, snapshot) {
        return (snapshot.connectionState == ConnectionState.done)
            ? SizedBox(
                height: 200,
                child: Chewie(
                  key: new PageStorageKey(widget.url),
                  controller: ChewieController(
                    videoPlayerController: videoPlayerController,
                    autoInitialize: true,
                    looping: true,
                    showOptions: false,
                    allowFullScreen: false,
                    errorBuilder: (context, errorMessage) {
                      return Center(
                        child: Text(
                          errorMessage,
                          style: TextStyle(color: Colors.white),
                        ),
                      );
                    },
                  ),
                ),
              )
            : SizedBox(
                height: 200,
                child: Center(
                  child: (snapshot.connectionState != ConnectionState.none)
                      ? CircularProgressIndicator()
                      : SizedBox(),
                ),
              );
      },
    );
  }
}

Answer 2

You must use https://pub.dev/packages/cached_video_player to cache videos of not more than 100MB max cache size and add the loader at the bottom of the video

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late CachedVideoPlayerController controller;
  @override
  void initState() {
    controller = CachedVideoPlayerController.network(
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");
    controller.initialize().then((value) {
      controller.play();
      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
          child: controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: controller.value.aspectRatio,
                  child: CachedVideoPlayer(controller))
              : const CircularProgressIndicator()), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}