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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • flutter编写精美的登录页面

    本文实例为大家分享了flutter编写精美的登录页面的具体代码,供大家参考,具体内容如下 先看效果图; 源代码已上传到github 我们先看一下页面 , 首先这个页面,我们并没有用到AppBar,当然也就没有自带返回功能. 然后下面有个Login的文字以及一条横线. 屏幕中上方是填写帐号以及密码的2个输入框,密码输入框有隐藏和显示密码的按钮. 下方是登录按钮 以及其他登录方式. 看一下主体布局: return Scaffold( body: Form( key: _formKey, child:

  • 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 • channe

  • Vue实现未登录跳转到登录页的示例代码

    1.登录页登录成功时将服务端返回的标识存放起来 2.在router中给不需要登录的页面设置 meta : { auth : false },如首页 3.使用路由前置守卫beforEach,由于给路由设置了meta : { auth : false },如果是符合该属性时则不需要跳转登录页 4.接下来根据token是否存入到localstorage来进行判断或者cookie是否存入客户端做判断,这里在vuex中做处理 如果token和cookie不存在时则需要跳转到登录页 5.在axios中响应拦

  • 使用JSP实现简单的用户登录注册页面示例代码解析

    实验要求: 将实验2中的系统用户登录和注册页面改为JSP页面,并部署自己的Web应用于Tomcat服务器中 具体要求: 完成登录JSP页面设计和注册页面设计 在登录页面表单中使用request对象获取用户信息,建立新的JSP页面完成登录验证(用户名和密码自己指定即可). 验证结果显示(如登录成功/用户名密码错误,可以使用JavaScript,也可以使用新的JSP页面). 在注册页面表单中使用request对象获取用户注册信息(注册项目由自己指定),在新的JSP页面显示用户注册信息,并提示注册成功

  • python通过PyQt5实现登录界面的示例代码

    目录 1. pyQt5简单使用 安装 界面化操作 2.开始实现登录界面 今天为大家介绍一个利用开发登录界面模板,基于pyqt5库,pyqt5这也一个PythonGUI界面开发的库,非常强 本例,展示了通过登录界面打开主界面的实现方式. 在开始实现登录界面前,先给大家普及一下PyQt5的安装以及使用 1. pyQt5简单使用 安装 pip install PyQt5 pip3.5 install pyqt5-tools 界面化操作 1.在win+R中输入designer并敲回车,即可启动Desig

  • Flutter仿微信通讯录实现自定义导航条的示例代码

    某些页面比如我们在选择联系人或者某个城市的时候需要快速定位到我们需要的选项,一般都会需要像微信通讯录右边有一个导航条一样的功能,由A到Z进行快速定位,本篇文章我们将自己来实现一个跟微信通讯录同样的功能. 关键点:手势定位滑动.列表定位.手势.列表联动. 准备数据,首先我们需要准备导航目录数据, List<String> _az = [ "☆", "A", "B", "C", "D", "

  • SSM项目实现短信验证码登录功能的示例代码

    目录 1.登入网站 zz短信平台 2.导入工具类MessageUtil 3.ajax 模块 4. html页面 5.编写controller层 1.登入网站 zz短信平台 http://sms_developer.zhenzikj.com/zhenzisms_user/login.html 导入pom依赖 <dependency> <groupId>com.zhenzikj</groupId> <artifactId>zhenzisms</artifa

  • Python实现登录接口的示例代码

    之前写了Python实现登录接口的示例代码,最近需要回顾,就顺便发到随笔上了 要求: 1.输入用户名和密码 2.认证成功,显示欢迎信息 3.用户名3次输入错误后,退出程序 4.密码3次输入错误后,锁定用户名 Readme: 1.UserList.txt 是存放用户名和密码的文件,格式为:username: password,每行存放一条用户信息 2.LockList.txt 是存放已被锁定用户名的文件,默认为空 3.用户输入用户名,程序首先查询锁定名单 LockList.txt,如果用户名在里面

  • jsp实现上一页下一页翻页功能(示例代码)

    前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给下个页面. 当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可 二话不多说,看代码,代码里面写的还算比较清楚.

  • layui点击导航栏刷新tab页的示例代码

    layui的tab也默认是切换,不会刷新,想要达到点击导航栏刷新tab的功能只需在tab.js文件中将autoRefresh: false,改为true. 以上这篇layui点击导航栏刷新tab页的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • SSM框架下实现登录注册的示例代码

    基本配置:jdk1.8   tomcat 8  MyEclipse 先打好地基: spring配置文件 application.xml: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-

随机推荐