登录时Flutter中的全屏视频背景 [英] Full screen video background in Flutter on Login
本文介绍了登录时Flutter中的全屏视频背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在我的登录页面中显示一个视频,例如Spotify,在其中您可以播放视频以及用于登录或注册的按钮:
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 但我认为目的是不同的.
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,
),
),
...
..
感谢和良好的编码
推荐答案
使用FittedBox小部件处理溢出的解决方案:
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()
],
)
一个完整的例子是:
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: () {},
),
],
),
),
],
);
}
}
这篇关于登录时Flutter中的全屏视频背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文