Position Text over Video - Flutter-web - flutter

Question

I'm trying to position some text over a video.
The video is currently taking as much space as possible while retaining it's original aspect ratio. Ideally I'd like it to keep doing this as I want the video to resize to fit the browser window.
I'm assuming I need to get get the height/width of the video dynamically..
If anyone knows how to make a video play automatically that would be great as well - I'm using the video_player package.
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
drawer: ResponsiveLayout.isSmallScreen(context) ? NavDrawer() : null,
body: Container(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
NavBar(),
Body(),
Footer(),
],
),
),
),
);
}
}
class Body extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ResponsiveLayout(
largeScreen: LargeScreen(),
mediumScreen: LargeScreen(),
smallScreen: LargeScreen(),
);
}
}
class LargeScreen extends StatefulWidget {
#override
_LargeScreenState createState() => _LargeScreenState();
}
class _LargeScreenState extends State<LargeScreen> {
VideoPlayerController _videoPlayerController;
Future<void> _initializeVideoPlayerFuture;
#override
void initState() {
_videoPlayerController = VideoPlayerController.asset(
'assets/videos/video.mp4',
);
_initializeVideoPlayerFuture = _videoPlayerController.initialize();
super.initState();
}
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
child: Column(
children: <Widget>[
FutureBuilder(
future: _initializeVideoPlayerFuture,
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 VideoPlayer.
return AspectRatio(
aspectRatio: _videoPlayerController.value.aspectRatio,
// Use the VideoPlayer widget to display the video.
child: VideoPlayer(_videoPlayerController),
);
} else {
// If the VideoPlayerController is still initializing, show a
// loading spinner.
return Center(child: CircularProgressIndicator());
}
},
),
],
),
);
}
#override
void dispose() {
super.dispose();
_videoPlayerController.dispose();
}
}

Answer 1

you can wrap your Widgets in stack widget and use positioning to position your text
AspectRatio(
aspectRatio: _videoPlayerController.value.aspectRatio,
// Use the VideoPlayer widget to display the video.
child: Stack(children:<Widget>[
VideoPlayer(_videoPlayerController),
Positioned(bottom:10,left:10,
child:Text("my text here))
])
)
update
If anyone knows how to make a video play automatically that would be great as well - I'm using the video_player package.
you can set the state of your video using your controller
_videoPlayerController.value.isPlaying
I want the video to resize to fit the browser window.
you can wrap your video in a SizedBox.expand which Creates a box that will become as large as its parent allows.
sized box constructors