Unable to display video in flutter without overflow using video_player package - flutter

Question

I'm having a hard time displaying a video using the video_player package. I'm new to flutter and am trying to create a simple website with a title, some text, and a local video displayed in the center of the screen with a title. The video is local and is in an assets folder, and I have also added the video_player and video location to the pubspec.yaml file. Any advice or suggestions are appreciated, I would like to improve at this language. Below is the code I have put together so far. Thanks!
import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';
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(
home: Scaffold(
appBar: AppBar(
title: Center(
child: Text(
"My Website",
textScaleFactor: 2,
style: TextStyle(color: Colors.white),
),
),
),
body: Column(
children: [
MyHomePage(),
],
),
),
);
}
}
MyHomePage class:
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(32),
child: Row(
children: [
Expanded(
/*1*/
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
/*2*/
Container(
padding: const EdgeInsets.only(bottom: 8),
child: Center(
child: Text(
'More photos & videos coming soon',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
),
Container(
padding: const EdgeInsets.only(bottom: 8),
child: Center(child: BackgroundVideo()),
),
],
),
),
],
),
);
}
}
Stateful video player that I would like to embed in the home page:
//need to ensure this video fits on the screen and doesn't overflow the bottom.
class BackgroundVideo extends StatefulWidget {
const BackgroundVideo({super.key});
#override
_BackgroundVideoState createState() => _BackgroundVideoState();
}
class _BackgroundVideoState extends State<BackgroundVideo> {
late VideoPlayerController _controller;
late Future<void> _initializeBackgroundVideoFuture;
#override
void initState() {
super.initState();
//Create and store the BackgroundVideoController.
_controller = VideoPlayerController.asset(
"build\assets\welcomescreen.mp4",
);
_initializeBackgroundVideoFuture = _controller.initialize();
_controller.setLooping(true);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Video'),
),
// Use a FutureBuilder to display a loading spinner while waiting for the
// VideoPlayerController to finish initializing.
body: FutureBuilder(
future: _initializeBackgroundVideoFuture,
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 const Center(
child: CircularProgressIndicator(),
);
}
},
),
floatingActionButton: FloatingActionButton(
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 (_controller.value.isPlaying) {
_controller.pause();
} else {
// If the video is paused, play it.
_controller.play();
}
});
},
// Display the correct icon depending on the state of the player.
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
}