flutter好用的輪子推薦二十-flutter仿iPhone鎖屏界面

前言

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。

IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一律，好用輪子萬里挑一！Flutter作為這兩年開始崛起的跨平臺開發框架，其第三方生態相比其他成熟框架還略有不足，但輪子的數量也已經很多了。本系列文章挑選日常app開發常用的輪子分享出來，給大家提高搬磚效率，同時也希望flutter的生態越來越完善，輪子越來越多。

本系列文章準備了超過50個輪子推薦，工作原因，儘量每1-2天出一篇文章。

tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網

正文

輪子

• 輪子名稱：passcode_screen
• 輪子概述：flutter仿iPhone鎖屏界面.
• 輪子作者：[email protected]
• 推薦指數：★★★★
• 常用指數：★★★
• 效果預覽：

安裝

dependencies:
 passcode_screen: ^1.0.2

import 'package:passcode_screen/passcode_screen.dart';
import 'package:passcode_screen/circle.dart';//如需要自定義密碼圓點UI時需引入
import 'package:passcode_screen/keyboard.dart';//如需要自定義鍵盤UI時需引入

基本使用

使用 PasscodeScreen 構建密碼鎖屏界面，參數配置如下：

PasscodeScreen(
 title: "請輸入鎖屏密碼",
 passwordEnteredCallback: _onPasscodeEntered,//密碼輸入後的處理方法
 cancelLocalizedText: '取消',//取消按鈕文字
 deleteLocalizedText: '刪除',//刪除按鈕文字
 shouldTriggerVerification: _verificationNotifier.stream,//控制器通知
 circleUIConfig: CircleUIConfig(//自定義密碼圓點ui 可不填
 borderColor: color,
 fillColor: color,
 circleSize: 30
 ),
 keyboardUIConfig: KeyboardUIConfig(digitBorderWidth: 2, primaryColor: color),//自定義鍵盤ui 可不填
 backgroundColor: Colors.black.withOpacity(0.8),//背景透明度
 cancelCallback: _onPasscodeCancelled,//取消按鈕回調 
)

示例

點擊按鈕彈出鎖屏界面，輸入123456後解鎖：

1.在按鈕事件中，push鎖屏界面

openLockScreen(){
 Navigator.push(context,PageRouteBuilder(opaque: false,pageBuilder: (context, animation, secondaryAnimation) {
 return PasscodeScreen(
 title: "請輸入鎖屏密碼",
 passwordEnteredCallback: _onPasscodeEntered,//密碼輸入後的處理方法
 cancelLocalizedText: '取消',//取消按鈕文字
 deleteLocalizedText: '刪除',//刪除按鈕文字
 shouldTriggerVerification: _verificationNotifier.stream,//控制器通知
 circleUIConfig: CircleUIConfig(//自定義密碼圓點ui 可不填
 borderColor: color,
 fillColor: color,
 circleSize: 30
 ),
 keyboardUIConfig: KeyboardUIConfig(digitBorderWidth: 2, primaryColor: color),//自定義鍵盤ui 可不填
 backgroundColor: Colors.black.withOpacity(0.8),//背景透明度
 cancelCallback: _onPasscodeCancelled,//取消按鈕回調 
 ); 
 }));
}

2.定義控制器通知

final StreamController _verificationNotifier = StreamController.broadcast();
//需引入 import 'dart:async';

3.密碼輸入後的處理方法 _onPasscodeEntered 與點擊取消處理方法 _onPasscodeCancelled

_onPasscodeEntered(String enteredPasscode) {
 bool isValid = '123456' == enteredPasscode;
 _verificationNotifier.add(isValid);
}
_onPasscodeCancelled(){
 print("點擊取消");
}

4.在頁面銷燬時註銷控制器

@override
void dispose() {
 _verificationNotifier.close();
 super.dispose();
}

頭條不讓發外鏈，私我拿源碼。