建站
咨詢
售后
建站咨詢
新聞中心
使用Flutter怎么實現(xiàn)視頻背景登錄頁？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
澤庫網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站設計等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)。
安裝插件
安裝video_player,我安裝的是最新的版本，請根據(jù)你自己的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: [
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: [
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(
"我已閱讀并同意《服務協(xié)議》及《隱私政策》",
style: TextStyle(color: Colors.white, fontSize: 13.0),
)
],
),
),
Positioned(
width: MediaQuery.of(context).size.width,
top: 80.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
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),
)
],
),
)
],
));
} 看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。
當前題目：使用Flutter怎么實現(xiàn)視頻背景登錄頁
瀏覽地址：http://ef60e0e.cn/article/pogieo.html
