Example code of login page with video background implemented by fluent

Final effect

Project address

https://github.com/Tecode/flutter_ widget

Implementation method

Install plug-ins

Install video_ Player, I installed the latest version. Please install the corresponding version according to your own fluent version. Android can directly use the virtual machine, and IOS can be played only if it needs a real machine.

dev_dependencies:
 Flutter_test:
  sdk: Flutter
 video_player: ^0.10.1+6

My fluent version

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

use

import 'package:video_player/video_player.dart';

Initialize playback

 @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);
    });
   });
 }

Pause on Destruction

 @override
 void dispose() {
  // TODO: implement dispose
  super.dispose();
  _controller.pause();
 }

layout

Main part

Using transform.scale to scale the video, we want the effect that no matter what the ratio of the video is, it can be tiled and displayed without stretching. Center zooms in the video and displays it in the center with a zoom ratio of_ Controller.value.aspectratio / mediaquery.of (context). Size.aspectratio, divide the aspect ratio of the video by the aspect ratio of the device.

If we process the video, it will spread all over the screen, but it will be stretched and look ugly. You can pull down the code and try it.

 @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,Sized@R_686_2419@(
        height: 20.0,ClipRRect(
        borderRadius: BorderRadius.circular(60.0),child: Text(
          "手机号登录",color: Color(0xff202326),textColor: Color(0xffededed),Sized@R_686_2419@(
        height: 60.0,Text(
        "我已阅读并同意《服务协议》及《隐私政策》",style: TextStyle(color: Colors.white,fontSize: 13.0),)
      ],top: 80.0,children: <Widget>[
       Text(
        "登录",style: TextStyle(
          fontSize: 40.0,fontWeight: FontWeight.w400,color: Colors.white),Sized@R_686_2419@(
        height: 10.0,Text(
        "视频背景登录页面",fontSize: 15.0),)
   ],));
 }

Write at the end

Other components are updated irregularly. Welcome to pay attention and star.

The above is the whole content of this article. I hope it will help you in your study, and I hope you will support us a lot.