脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Flutter 视频背景的登录页

Flutter实现用视频背景的登录页的示例代码

 更新时间：2019年08月05日 10:23:36   作者：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。

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

您可能感兴趣的文章:

相关文章

  • Android引用arr包的两种方法

    Android引用arr包的两种方法

    这篇文章介绍了android中引用arr包的两种方法，jar包和arr包，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-11-11
  • Android中WindowManager与WMS的解析

    Android中WindowManager与WMS的解析

    今天小编就为大家分享一篇关于Android中WindowManager与WMS的解析，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Android 实现自己的LOG信息

    Android 实现自己的LOG信息

    本文主要讲解Android LOG,这里对如何创建自己的Android LOG信息做了详细的介绍，并附简单代码示例，有需要的小伙伴可以参考下
    2016-08-08
  • Android使用Flutter实现录音插件

    Android使用Flutter实现录音插件

    这篇文章主要介绍了基于flutter实现录音功能,介绍了如何录音，如何把文件存放到本地，这些都是我们平常使用这个功能会遇到的问题。在使用的过程中遇到的问题也有列出，需要的朋友可以参考下
    2022-08-08
  • Android页面之间进行数据回传的方法分析

    Android页面之间进行数据回传的方法分析

    这篇文章主要介绍了Android页面之间进行数据回传的方法,结合实例形式分析了Android页面之间进行数据的传递与处理技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Android实现简易的计算器

    Android实现简易的计算器

    这篇文章主要为大家详细介绍了Android实现简易的计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Kotlin与Java相互调用的完整实例

    Kotlin与Java相互调用的完整实例

    Kotlin的设计过程中就考虑到了与Java的互操作性,在Kotlin中可以直接调用既有的Java代码,反过来在Java中也可以很流畅地使用Kotlin代码,这篇文章主要给大家介绍了关于Kotlin与Java相互调用的相关资料,需要的朋友可以参考下
    2021-12-12
  • uniapp打包Android的apk(原生APP-云打包)及发布测试全过程

    uniapp打包Android的apk(原生APP-云打包)及发布测试全过程

    uni-app本地打包apk需要提前做非常多的准备工作,而且可能会劝退一些开发者,下面这篇文章主要给大家介绍了关于uniapp打包Android的apk(原生APP-云打包)及发布测试的相关资料,需要的朋友可以参考下
    2023-02-02
  • Android 屏幕实现上下翻转

    Android 屏幕实现上下翻转

    这篇文章主要介绍了Android 屏幕实现上下翻转的相关资料,需要的朋友可以参考下
    2017-07-07
  • 基于Android实现个性彩色好看的二维码

    基于Android实现个性彩色好看的二维码

    二维码在我们日常生活中无处不在，今天小编通过本教程给大家介绍基于Android实现个性彩色好看的二维码，需要的朋友参考下吧
    2016-02-02

最新评论