How to properly put multiple VideoPlayer into a PageView in flutter?

Question

I'm trying to create an app where I can switch videos with swipes (similar to TikTok). My current implementation looks like this:

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

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

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

  @override
  Widget build(BuildContext context) {
    List<String> urls = [
      "https://movietrailers.apple.com/movies/oscilloscope/relaxer/relaxer-trailer-1_720p.mov",
      "https://movietrailers.apple.com/movies/sony_pictures/the-front-runner/front-runner-trailer-1_720p.mov",
      "https://movietrailers.apple.com/movies/independent/cant-stop-wont-stop-a-bad-boy-story/cant-stop-wont-stop-trailer-1_720p.mov",
      "https://movietrailers.apple.com/movies/independent/at-first-light/at-first-light-trailer-1_720p.mov"
    ];

    return MaterialApp(
      home: PageView.builder(
        itemBuilder: (ctx, index) => VideoScreen(url: urls[index]),
        itemCount: urls.length,
        scrollDirection: Axis.vertical,
      ),
    );
  }
}

class VideoScreen extends StatefulWidget {
  final String url;
  const VideoScreen({Key? key, required this.url}) : super(key: key);

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

class _VideoScreenState extends State<VideoScreen> {
  late VideoPlayerController controller;

  void initController() async {
    controller = VideoPlayerController.network(widget.url);
    await controller.initialize();
    controller.play();
  }

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

  @override
  Widget build(BuildContext context) {
    if (controller.value.isInitialized) {
      return const CircularProgressIndicator();
    }

    return SizedBox(
      height: double.infinity,
      child: AspectRatio(
        aspectRatio: controller.value.aspectRatio,
        child: VideoPlayer(controller),
      ),
    );
  }
}

However, each initialization call o VideoPlayerController entails a complete freeze of the application for the duration of the video download. During this, I am not able to perform any actions in the application.

I'm using the newest version of package in my pubspec.yaml: video_player: ^2.2.16. Here is the output of the flutter doctor command:

% flutter doctor -v
[✓] Flutter (Channel stable, 2.5.1, on macOS 12.1 21C52 darwin-arm, locale ru-RU)
    • Flutter version 2.5.1 at /Users/rkfcccccc/documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ffb2ecea52 (5 months ago), 2021-09-17 15:26:33 -0400
    • Engine revision b3af521a05
    • Dart version 2.14.2

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/rkfcccccc/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.2.1, Build version 13C100
    • CocoaPods version 1.11.2

[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] VS Code (version 1.63.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.32.0

[✓] Connected device (1 available)
    • rkfcccccc (mobile) iOS 15.2.1 19C63

Answer 1

Consider making use of state management such as Provider to handle the logic to initialize incoming indices and play current index. The same will be used to pause/remove the controller once the index is changed to a succeeding or preceding index.

Answer 2

just make sure you dispose your controller inside your VideoScreen

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