Background color getting changed when resizing browser while using video_player in flutter web

Question

I have been using video_player library in flutter and creating a web application using flutter.I have been using it to implement with some functionality but whenever I an changing the width of the my browser, my background colour and everything is getting changed to white colour. For example this is my complete code

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

class VideoPlayerPage extends StatefulWidget {
  const VideoPlayerPage({Key? key}) : super(key: key);

  @override
  _VideoPlayerPageState createState() => _VideoPlayerPageState();
}

class _VideoPlayerPageState extends State<VideoPlayerPage> {
  late VideoPlayerController _controller;
 

  String dataSource = "Some data source";

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(dataSource)
      ..addListener(() => setState(() {
            videoPosition = _controller.value.position;
          }))
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {
          videoLength = _controller.value.duration;
          _controller.play();
        });
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Video player'),
      ),
      backgroundColor: Color(0xFF010101), //black colour
      body: Column(
        children: [
          if (_controller.value.isInitialized) ...[
            AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            ),
            VideoProgressIndicator(
              _controller,
              allowScrubbing: true,
              colors: VideoProgressColors(),
            ),
            IconButton(
              onPressed: () {
                setState(() {
                  _controller.value.isPlaying
                      ? _controller.pause()
                      : _controller.play();
                });
              },
              color: Colors.blue,
              icon: Icon(
                _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
              ),
            ),

Here is the screenshot after the code runs:

Here is the screenshot after I change the width of the browser

I don't want the video background to be changed and set it that way only. Also other widgets are also getting color changes. This code has been tested in Google Chrome. Kindly help me in solving this.

Answer 1

I think these are related:

https://github.com/flutter/flutter/issues/85963

https://github.com/flutter/flutter/issues/77832

https://github.com/flutter/flutter/issues/89521

Setting web renderer to html is not a permanent solution, but this is the only option available now.

flutter run -d chrome --web-renderer html