Flutter实现用视频背景的登录页的示例代码
时间:2022-07-27
本文章向大家介绍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。
以上就是本文的全部内容,希望对大家的学习有所帮助。
- apache域名绑定(appserv环境)
- JS魔法堂:那些困扰你的DOM集合类型
- ASP.NET Core 介绍和项目解读
- 【手把手教你全文检索】Lucene索引的【增、删、改、查】
- 红方块躲避—天才游戏
- .NET Core全新路线图(译)
- JS魔法堂:阻止元素被选中
- CSS3魔法堂:禁止用户改变textarea大小
- CentOS6.5菜鸟之旅:VIM插件NERDtree初探
- CentOS6.5菜鸟之旅:安装输入法(小呀小企鹅)
- CSS魔法堂:选择器及其优先级
- 常见的Web实时消息交互方式和SignalR
- 【设计模式】——工厂方法FactoryMethod
- 前端翻译:Activating Browser Modes with Doctype
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用xdebug对php做性能分析调优
- 使用SAP Analytics Path Framework通过图表和表格方式展示CDS view数据
- ELK学习笔记之Docker Container exited with code 137
- 用这10个小技巧加速Python编程
- Dijkstra算法及其C++实现
- WPF 启动屏幕键盘
- dotnet 里的那些锁 AutoResetEvent 用法
- MySQL是如何实现事务的ACID
- 白话K8S核心组件概念
- k8s 架构、基本概念及命令
- Java API 连接 Hbase示例
- 点线图和阶梯图的画法
- 添加直线的两种方式
- nginx fastcgi模块ngx_http_fastcgi_module详细解析、使用手册、完整翻译
- Chrome代码调试指南