Flutter实现用视频背景的登录页的示例代码
程序员文章站
2022-04-09 13:40:33
最终效果
项目地址
https://github.com/tecode/flutter_widget
实现方法
安装插件
安装video_pl...
最终效果
项目地址
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。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。