专栏首页恩蓝脚本Flutter实现用视频背景的登录页的示例代码

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 条评论
登录 后参与评论

相关文章

  • Fireworks怎么绘制立体的双环图形?

    Fireworks中想要绘制一个双环的图形,该怎么绘制立体的双环呢?下面我们就来看看详细。

    砸漏
  • Android实现列表时间轴

    本文实例为大家分享了Android列表时间轴展示的具体代码,供大家参考,具体内容如下

    砸漏
  • protobuf简单介绍和ubuntu 16.04环境下安装教程

    protobuf是谷歌的开源序列化协议框架,结构类似于XML,JSON这种,显著的特点是二进制的,效率高,主要用于通信协议和数据存储等方面,算是一种结构化数据...

    砸漏
  • 用python爬取3万多条评论,看韩国人如何评价韩国电影《寄生虫》?

    它是由韩国导演奉俊昊自编自导的影片,一举拿下最佳影片、最佳导演、最佳原创剧本和最佳国际电影四座奥斯卡奖杯,创造历史成为奥斯卡史上首部非英语最佳影片。

    朱小五
  • Serverless架构实践初探|洞见

    随着云计算技术的进步,软件系统的架构方式也因此发生着一些变化,其中Serverless架构就是这里的一个典型的例子。 ? (图片来自:http://t.cn/R...

    ThoughtWorks
  • 薛永刚:万物互联的安全新业态

    2018中国SD-WAN峰会已经圆满落幕,上元云安全CTO 薛永刚为我们带来主题演讲”万物互联的安全新业态”。

    SDNLAB
  • Inner Join, Left Outer Join和Association的区别

    测试用的CDS视图的源代码,第8行用Inner Join连接TJ02T, 后者存放了所有系统状态的ID和描述。

    Jerry Wang
  • 利用QQ收藏做检测更新|授权系统|json数据 PHP版

    https://share.weiyun.com/fd5c9441afc13c38b454e3fd88ed3f41

    墨渊
  • curl抓取页面时遇到重定向的解决方法

    代码的目的很简单,抓取页面: http://www.144go.com 执行上述代码,得到的结果:

    跑马溜溜的球
  • 利用QQ收藏做检测更新|授权系统|json数据 PHP版

    Youngxj

扫码关注云+社区

领取腾讯云代金券