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.