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

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
),
);
}
}