How can I get my flutter video player to work for Chrome Web, correctly - flutter

Question

I am getting videoplayer overflow. How do I resize my video player, so it correctly works. Error message "A RenderFlex overflowed by 93 pixels on the right" during window resizing.
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:provider/provider.dart';
class VolumeManager with ChangeNotifier{
var _volume=50.0;
double get volume=>_volume;
void setVolume({
required double volumeValue,
required VideoPlayerController controller
}){
_volume=volumeValue;
controller.setVolume(_volume);
notifyListeners();
}
}
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: 'Test Video',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home:
ChangeNotifierProvider(create:(context)=>VolumeManager(),child: Test_LoadVideoWidget()),
);
}
}
class Test_LoadVideoWidget extends StatefulWidget {
Test_LoadVideoWidget({Key? key}) : super(key: key);
#override
State<Test_LoadVideoWidget> createState() => _Test_LoadVideoWidgetState();
}
class _Test_LoadVideoWidgetState extends State<Test_LoadVideoWidget> {
late final VideoPlayerController controller;
late final Future<void>initVideo;
#override
void initState() {
// TODO: implement initState
super.initState();
controller=VideoPlayerController.asset("assets/video/butterfly.mp4");
controller.setLooping(true);
initVideo=controller.initialize();
}
#override
void dispose() {
// TODO: implement dispose
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return FutureBuilder<void>(
future:initVideo,
builder:(context,snapshot){
if (snapshot.connectionState==ConnectionState.done){
return Test_VideoWidget(controller);
}
return Center(child:CircularProgressIndicator());
}
);
}
}
class Test_VideoWidget extends StatelessWidget {
final VideoPlayerController controller;
Test_VideoWidget(this.controller);
void _play(){
if (!controller.value.isPlaying){
controller.play();
}
}
void _pause(){
if (controller.value.isPlaying){
controller.pause();
}
}
#override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title:Text("Test Video",style:Theme.of(context).textTheme.headline2)),
body:
Container(
width:MediaQuery.of(context).size.width,
//height:MediaQuery.of(context).size.height,
padding:EdgeInsets.all(20),child:
Column(
mainAxisAlignment:MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AspectRatio(aspectRatio: controller.value.aspectRatio,
child:VideoPlayer(controller),
),
Row(children: [
SizedBox(width:200,child:ElevatedButton(onPressed: (){_play();}, child: Text("Play!",style:Theme.of(context).textTheme.button))),
const SizedBox(height:50,width:200),
SizedBox(width:200,child:ElevatedButton(onPressed:(){_pause();}, child:Text("Pause",style:Theme.of(context).textTheme.button))),
],)
,Consumer<VolumeManager>(
builder:(context,manager,_)
=>Slider(
min: 0,
max: 100,
value: manager.volume,
onChanged: (value) =>
{
manager.setVolume(volumeValue: value, controller: controller)
}
),
)
],)
)
);
}
}

Answer 1

solution: I used SingleChildScrollView to solve the horizontal and vertical renderflex overflow errors. I changed the Consumer to use => notation rather than { return notation.
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:provider/provider.dart';
class VolumeManager with ChangeNotifier{
var _volume=50.0;
double get volume=>_volume;
void setVolume({
required double volumeValue,
required VideoPlayerController controller
}){
_volume=volumeValue;
controller.setVolume(_volume);
notifyListeners();
}
}
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: 'Test Video',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home:
ChangeNotifierProvider(create:(context)=>VolumeManager(),child: Test_LoadVideoWidget()),
);
}
}
class Test_LoadVideoWidget extends StatefulWidget {
Test_LoadVideoWidget({Key? key}) : super(key: key);
#override
State<Test_LoadVideoWidget> createState() => _Test_LoadVideoWidgetState();
}
class _Test_LoadVideoWidgetState extends State<Test_LoadVideoWidget> {
late final VideoPlayerController controller;
late final Future<void>initVideo;
#override
void initState() {
// TODO: implement initState
super.initState();
controller=VideoPlayerController.asset("assets/video/butterfly.mp4");
//..initialize().then((_){
//controller.play();
//controller.setLooping(true);
setState(() {
});
//});
initVideo = controller.initialize();
}
#override
void dispose() {
// TODO: implement dispose
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
//return Test_VideoWidget(controller);
return FutureBuilder<void>(
future:initVideo,
builder:(context,snapshot){
if (snapshot.connectionState==ConnectionState.done){
return Test_VideoWidget(controller);
}
return Center(child:CircularProgressIndicator());
}
);
}
}
class Test_VideoWidget extends StatelessWidget {
final VideoPlayerController controller;
Test_VideoWidget(this.controller);
void _play(){
if (!controller.value.isPlaying){
controller.play();
}
}
void _pause(){
if (controller.value.isPlaying){
controller.pause();
}
}
#override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title:Text("Test Video",style:Theme.of(context).textTheme.headline2)),
body:
// controller.value.isInitialized?
Container(
width:MediaQuery.of(context).size.width,
height:MediaQuery.of(context).size.height,
padding:EdgeInsets.all(20),child:
SingleChildScrollView(child:Column(
mainAxisAlignment:MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AspectRatio(aspectRatio: controller.value.aspectRatio,
child:VideoPlayer(controller),
),
SingleChildScrollView(scrollDirection: Axis.horizontal, child: Row(children: [
SizedBox(width:200,child:ElevatedButton(onPressed: (){_play();}, child: Text("Play!",style:Theme.of(context).textTheme.button))),
const SizedBox(height:50,width:200),
SizedBox(width:200,child:ElevatedButton(onPressed:(){_pause();}, child:Text("Pause",style:Theme.of(context).textTheme.button))),
],))
,Consumer<VolumeManager>(
builder:(context,manager,_)=>
Slider(
min: 0,
max: 50,
value: manager.volume,
onChanged: (value) =>
{
manager.setVolume(volumeValue: value, controller: controller)
}
),
)
],)
)
//:
// Center(child:CircularProgressIndicator()),
));
}
}