Flutter实现用视频背景的登录页的示例代码
作者：Tecode
这篇文章主要介绍了Flutter实现用视频背景的登录页的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
最终效果
项目地址
https://github.com/Tecode/flutter_widget
实现方法
安装插件
安装video_player,我安装的是最新的版本，请根据你自己的flutter版本去安装对应的版本，安卓可以直接使用虚拟机，IOS需要真机才可以播放。
dev_dependencies: flutter_test: sdk: flutter video_player: ^0.10.1+6
我的Flutter版本
Flutter 1.7.8+hotfix.4 • channel stable • https://github.com/flutter/flutter.git Framework • revision 2e540931f7 (3 days ago) • 2019-07-09 13:14:38 -0700 Engine • revision 54ad777fd2 Tools • Dart 2.4.0
使用
import 'package:video_player/video_player.dart';
初始化播放
@override
void initState() {
// TODO: implement initState
super.initState();
_controller = VideoPlayerController.network(videoUrl)
..initialize().then((_) {
setState(() {});
_controller.play();
_controller.setLooping(true);
// _controller.setVolume(0.0);
Timer.periodic(Duration(seconds: 15), (Timer time) {
print(time);
});
});
}
销毁时暂停
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_controller.pause();
}
布局
主要部分
使用Transform.scale对视频进行缩放，我们想要的效果就是不管视频是什么比率，都可以平铺无拉伸的显示。Center让视频放大以后居中显示，缩放比为_controller.value.aspectRatio /MediaQuery.of(context).size.aspectRatio，用视频的宽高比除以设备的宽高比。
如果我们对视频进行处理也会铺满全部屏幕，但是会被拉伸，看起来很丑，可以拉下代码试一下。
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_controller.pause();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Transform.scale(
scale: _controller.value.aspectRatio /
MediaQuery.of(context).size.aspectRatio,
child: Center(
child: Container(
child: _controller.value.initialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Text("正在初始化"),
),
),
),
Positioned(
width: MediaQuery.of(context).size.width,
bottom: 26.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(60.0),
child: MaterialButton(
onPressed: () {},
child: Text(
"微信登录",
style:
TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
),
color: Color(0xffFFDB2E),
textColor: Color(0xff202326),
height: 44.0,
minWidth: 240.0,
elevation: 0.0,
),
),
SizedBox(
height: 20.0,
),
ClipRRect(
borderRadius: BorderRadius.circular(60.0),
child: MaterialButton(
onPressed: () {},
child: Text(
"手机号登录",
style:
TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
),
color: Color(0xff202326),
height: 44.0,
minWidth: 240.0,
elevation: 0.0,
textColor: Color(0xffededed),
),
),
SizedBox(
height: 60.0,
),
Text(
"我已阅读并同意《服务协议》及《隐私政策》",
style: TextStyle(color: Colors.white, fontSize: 13.0),
)
],
),
),
Positioned(
width: MediaQuery.of(context).size.width,
top: 80.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"登录",
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.w400,
color: Colors.white),
),
SizedBox(
height: 10.0,
),
Text(
"视频背景登录页面",
style: TextStyle(color: Colors.white, fontSize: 15.0),
)
],
),
)
],
));
}
写在最后
平时会不定期更新其它的组件欢迎关注，欢迎star。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。