I want to display a video in my Login Page like Spotify in which you can have a video playing and buttons to sign in or register:
This is the plugin I found so far:
video_player 0.7.2 But I think the purpose is different.
I know how to display an image but I couldn't manage to use the plugin above instead of the image. This is what I have now using a image as a background
body: new Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.redAccent,
image: DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.1), BlendMode.dstATop),
image: AssetImage('assets/my_image.jpg'),
fit: BoxFit.cover,
),
),
...
..
Thanks and good coding
To set background image in Flutter, you can use the Container widget. The Container widget has a property called decoration. Then you can use the BoxDecoration class to provide the actual image. Before directly setting the background image in full screen, let's see the basics of adding a background image.
In the Scaffold, we need to set the body property to a Stack widget. This will allow us to add a video as the background and then stack other widgets on top of it. Take note of the FittedBox in the widget tree. For my video to look right, I had to set the fit property to BoxFit.
A solution which handles overflow using a FittedBox widget:
Stack(
children: <Widget>[
SizedBox.expand(
child: FittedBox(
fit: BoxFit.cover,
child: SizedBox(
width: _controller.value.size?.width ?? 0,
height: _controller.value.size?.height ?? 0,
child: VideoPlayer(_controller),
),
),
),
LoginWidget()
],
)
A full example would be:
import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';
void main() => runApp(BackgroundVideo());
class BackgroundVideo extends StatefulWidget {
@override
_BackgroundVideoState createState() => _BackgroundVideoState();
}
class _BackgroundVideoState extends State<BackgroundVideo> {
VideoPlayerController _controller;
@override
void initState() {
super.initState();
_controller = VideoPlayerController.network(
'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')
..initialize().then((_) {
_controller.play();
_controller.setLooping(true);
// Ensure the first frame is shown after the video is initialized
setState(() {});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
SizedBox.expand(
child: FittedBox(
fit: BoxFit.cover,
child: SizedBox(
width: _controller.value.size?.width ?? 0,
height: _controller.value.size?.height ?? 0,
child: VideoPlayer(_controller),
),
),
),
LoginWidget()
],
),
),
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
}
class LoginWidget extends StatelessWidget {
const LoginWidget({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(),
Container(
padding: EdgeInsets.all(16),
width: 300,
height: 200,
color: Colors.grey.withAlpha(200),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
TextField(
decoration: InputDecoration(
hintText: 'Username',
),
),
TextField(
decoration: InputDecoration(
hintText: 'Password',
),
),
RaisedButton(
child: Text('Login'),
onPressed: () {},
),
],
),
),
],
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With