video - 颤动中的视频背景
问题描述
有可能在颤动中一直播放背景视频吗?
我正在寻找一些软件包并试图使其发挥作用,但我不知道如何。
也许使用类似的东西,但有视频。
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("images/f1.jpg"),
fit: BoxFit.cover,
),),
一个容器内。
解决方案
使用 FittedBox 小部件处理溢出的解决方案:
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: () {},
),
],
),
),
],
);
}
}
推荐阅读
- vb.net - 在交集列表中放置一个条件(计数长度)
- angular - 在 .pipe() 中使用 delay(2000) 时,.subscribe 不会被触发。(角度 Rxjs)
- vue.js - 我可以将默认端口从 8080 更改为 Vue 中的其他端口吗?
- php - Laravel:比较数据库中两列之间的日期不起作用
- redirect - 如何将ip重定向到子域
- spring - 我想获取一个数据库中的所有表并在jsp中显示
- r - lrtest(似然比检验)使用plgm包计数数据
- php - Composer 自动加载性能
- cordova - OneSignal 订阅用户?
- postgresql - 复杂匹配和加入 PostgreSQL