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

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

score 1 · Answer 1 · answered Apr 21 '22 at 15:12

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

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

1 Answers1