Passcode Lock Screen in Flutter

This article explains you how to implement passcode lock screen in flutter applications using passcode_screen flutter package. You can also check out flutter related articles.

Passcode Lock Screen is used in most of mobile devices for security purpose. In this flutter example, we will unlock the screen using our passcode in flutter app. passcode_screen flutter package provides passcode input UI to authenticate entered passcode.

 

Add required dependency in your pubspec.yaml file

passcode_screen: ^2.0.0
 
 

Verify Passcode Lock Screen Authentication

bool isAuthenticated = false;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Passcode Lock Screen Sample’)),
body: Center(
child: Container(
padding: EdgeInsets.all(25),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
if(!isAuthenticated) openPassCodeScreenButtonWidget(context),
if(isAuthenticated) Text(‘Authentication is Successful!’, style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold, color: Colors.green))
],
),
),
));
}

 
openPassCodeScreenButtonWidget(BuildContext context) => MaterialButton(
padding: EdgeInsets.symmetric(horizontal: 45, vertical: 25),
color: Colors.deepOrangeAccent,
child: Text(‘Passcode Screen’,style: TextStyle(color: Colors.white,
fontWeight: FontWeight.bold,fontSize: 25),),
onPressed: () {
showPassCodeScreen(
context,
opaque: false,
cancelButton: Text(
‘Cancel’,
style: const TextStyle(fontSize: 18, color: Colors.white,),
semanticsLabel: ‘Cancel’,
),
);
},
);
 
 

Display Passcode Lock Screen for iphone or Android

final StreamController<bool> verificationNotifier = StreamController<bool>.broadcast();
String storedDevicePassCode = “123456”;

showPassCodeScreen(BuildContext context,
{bool opaque,
CircleUIConfig circleUIConfig,
KeyboardUIConfig keyboardUIConfig,
Widget cancelButton,
List<String> digits}) {
Navigator.push(
context,
PageRouteBuilder(
opaque: opaque,
pageBuilder: (context, animation, secondaryAnimation) => PasscodeScreen(
title: Text(
‘Enter Passcode’,
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 28),
),
circleUIConfig: circleUIConfig,
keyboardUIConfig: keyboardUIConfig,
passwordEnteredCallback: onPassCodeEntered,
cancelButton: cancelButton,
deleteButton: Text(
‘Delete’,
style: const TextStyle(fontSize: 18, color: Colors.white),
semanticsLabel: ‘Delete’,
),
shouldTriggerVerification: verificationNotifier.stream,
backgroundColor: Colors.black.withOpacity(1),
cancelCallback: onPassCodeCancelled,
digits: digits,
passwordDigits: 6,
bottomWidget: resetPassCodeButtonWidget(),
),
));
}

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

Check Passcode is valid or not

onPassCodeEntered(String enteredPassCode) {
bool isValid = storedDevicePassCode == enteredPassCode;
verificationNotifier.add(isValid);
if (isValid) {
setState(() {
this.isAuthenticated = isValid;
});
}
}
 
resetPassCodeButtonWidget() => Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.only(bottom: 10.0, top: 20.0),
child: FlatButton(
child: Text(
“Reset Passcode”,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 18, color: Colors.white, fontWeight: FontWeight.w300),
),
splashColor: Colors.white.withOpacity(0.4),
highlightColor: Colors.white.withOpacity(0.2),
onPressed: resetDevicePassCode,
),
),
);
 
onPassCodeCancelled() {
Navigator.maybePop(context);
}
 
 

Reset Device Passcode

resetDevicePassCode() {
Navigator.maybePop(context).then((result) {
if (!result) {
return;
}
resetDevicePassCodeDialog(() {
Navigator.maybePop(context);
});
});
}
 
resetDevicePassCodeDialog(VoidCallback onAccepted) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
backgroundColor: Colors.white,
title: Text(
“Reset Device Passcode”,
style: const TextStyle(color: Colors.black),
),
content: Text(
“Are you sure want to reset device Passcode?”,
style: const TextStyle(color: Colors.black),
),
actions: <Widget>[
FlatButton(
child: Text(
“Cancel”,
style: const TextStyle(fontSize: 20, color: Colors.deepOrangeAccent),
),
onPressed: () {
Navigator.maybePop(context);
},
),
FlatButton(
child: Text(
“Proceed”,
style: TextStyle(fontSize: 20, color: Colors.deepOrangeAccent),
),
onPressed: onAccepted,
),
],
);
});
}
 
 
passcode lock
 
 
passcode lock
 
 

Leave a Reply