I have written a code for playing video in my Flutter Web application and it is playing the video in regular screen. Now I want to play it in full screen.
I have already tried different methods suggested here but nun of them is working. Please suggest a solution.
@override
void initState() {
super.initState();
_controller = VideoPlayerController.network(widget.url)
..initialize().then((_) {
setState(() {
_controller.play();
_controller.seekTo(_controller.value.position + widget.position);
});
Stream.periodic(Duration(seconds: 1)).listen((_) {
setState(() {
_currentPosition = _controller.value.position;
});
});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: _controller.value.isInitialized
? Stack(
children: [
SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Center(
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),//Video Player Implementation
),
),
),
Positioned(
bottom: 0,
left: MediaQuery.of(context).size.width*0.08,
child: SizedBox(
width: MediaQuery.of(context).size.width*0.84,
height: 80,
child: Column(
children: [
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(_formatDuration(_currentPosition)),
Text(_formatDuration(
_controller.value.duration)),
],
),
),
VideoProgressIndicator(
_controller,
allowScrubbing: true,
colors: VideoProgressColors(
backgroundColor: Colors.yellowAccent.shade100,
bufferedColor: Colors.blue.shade100,
playedColor: Colors.blueAccent),
),
SizedBox(
width: MediaQuery.of(context).size.width*0.8,
height: 40,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
icon: _controller.value.isPlaying
? const Icon(
Icons.pause_outlined,
size: 30,
color: Colors.white,
)
: const Icon(
Icons.play_arrow,
size: 30,
color: Colors.white,
)),
Row(
children: [
IconButton(
onPressed: () {
_controller.seekTo(Duration(
seconds: _controller
.value.position.inSeconds -
10));
},
icon: const Icon(
Icons.fast_rewind,
size: 30,
color: Colors.white,
)),
const SizedBox(
width: 20,
),
IconButton(
onPressed: () {
_controller.seekTo(Duration(
seconds: _controller
.value.position.inSeconds +
10));
},
icon: const Icon(
Icons.fast_forward,
size: 30,
color: Colors.white,
)),
],
),
Row(
children: [
IconButton(
onPressed: () {
setState(() {
mikeOn = !mikeOn;
_controller
.setVolume(mikeOn ? 1.0 : 0.0);
});
},
icon: mikeOn == true
? const Icon(
CupertinoIcons.speaker_2_fill,
size: 30,
color: Colors.white,
)
: const Icon(
CupertinoIcons.speaker_slash_fill,
size: 30,
color: Colors.white,
)),
const SizedBox(
width: 20,
),
IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(
Icons.fullscreen_exit_sharp,
size: 30,
color: Colors.white,
)),
],
),
],
),
),
],
),
)),
],
)
: const Center(child: CircularProgressIndicator(color: Colors.lightGreen,),),
),
),
);
}
}
With above code video is getting played in browser full screen but not in the device full screen.
