How do you play a video outside of the video player class?

Question

Sorry if the question isn't that straight forward I'm just starting out. Every play video example I see through flutter examples uses a floating action button in the same class as the video player. I want to add a video player instance to my home screen and experiment with different ways to play the video (tapping on different elements, etc. I can't seem to gain access to the instance to access the controller. I'm not sure how to actually create a video player instance and then access the video controller from another place.

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


class VideoPlayerScreen extends StatefulWidget {
  VideoPlayerScreen({Key key}) : super(key: key);
  final VideoPlayerScreenState videoState = new VideoPlayerScreenState();
  @override
  VideoPlayerScreenState createState() => VideoPlayerScreenState();
}

class VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController controller;
  Future<void> initializeVideoPlayerFuture;  

  @override
  void initState() {
    // Create and store the VideoPlayerController. The VideoPlayerController
    // offers several different constructors to play videos from assets, files,
    // or the internet.
    controller = VideoPlayerController.network('https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );

    // Initialize the controller and store the Future for later use
    initializeVideoPlayerFuture = controller.initialize();

    // Use the controller to loop the video
    controller.setLooping(true);

    super.initState();
  }


  @override
  void dispose() {
    // Ensure you dispose the VideoPlayerController to free up resources
    controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // Use a FutureBuilder to display a loading spinner while you wait for the
      // VideoPlayerController to finish initializing.
      child: FutureBuilder(
        future: initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // If the VideoPlayerController has finished initialization, use
            // the data it provides to limit the Aspect Ratio of the Video
            return AspectRatio(
              aspectRatio: controller.value.aspectRatio,
              // Use the VideoPlayer widget to display the video
              child: VideoPlayer(controller),
            );
          } else {
            // If the VideoPlayerController is still initializing, show a
            // loading spinner
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

//this is the button I'm calling from the app.dart file

Widget playPauseButton(VideoPlayerScreen videoPlayer){

  return IconButton(
    alignment: Alignment.center,

    onPressed: (){
      // Wrap the play or pause in a call to `setState`. This ensures the
          // correct icon is shown
          setState(() {

            // If the video is playing, pause it.
            if (videoPlayer.videoState.controller.value.isPlaying) {
              videoPlayer.videoState.controller.pause();
            } else {
              // If the video is paused, play it
              videoPlayer.videoState.controller.play();
            }
          });
        },
      icon: Icon(videoPlayer.videoState.controller.value.isPlaying ? Icons.pause: Icons.play_arrow),

  );
}

Answer 1

you can create a class named VideoProvider and put a VideoPlayer widget inside there. after that, all you need is create a parameter named controller and pass it to your VideoPlayer widget. controller should be a type of VideoPlayerController; here is an example :

class MySpecificPage extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
        return _MySpecificPageState();
    }
}

class _MySpecificPageState extends State<MySpecificPage> {

    VideoPlayerController controller;
    VoidCallback listener;

    @override
    void initState() {
        listener = () => setState(() {});
        videoHandler();
        super.initState();
    }

    void videoHandler() {
        if (controller == null) {
            controller = VideoPlayerController.network('https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4')
                ..addListener(listener)
                ..setVolume(0.5)
                ..initialize();
        } else {
            if (controller.value.isPlaying) {
                controller.pause();
            } else {
                controller.play();
            }
        }
    }


    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Videop Provider Example'),
            ),
            body:Container(
            child: Column(
                children: <Widget>[
                    VideoProvider(controller),
                    RaisedButton(
                        child: Text('click here to play & puase the video'),
                        onPressed: () {
                            videoHandler();
                        },
                        )
                ],
                ),
            ),
        );
    }
}

class VideoProvider extends StatelessWidget {
    final VideoPlayerController controller;

    VideoProvider(this.controller);

    @override
    Widget build(BuildContext context) {
        return AspectRatio(
            aspectRatio: 16 / 9,
            child: VideoPlayer(
                controller
            ),
        );
    }
}