当前位置： 移动技术网 > 移动技术>移动开发>Android > Flutter实现用视频背景的登录页的示例代码

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

2019年09月06日  | 移动技术网移动技术  | 我要评论

最终效果

项目地址

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。

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网