I know I’m not the only one who struggles with this to make the custom number pad or code input widget without using the software keyboard.
My current project requires working with a pin unlock screen. I have been searching a lot to find the package of that type of widget so i can use it as per my requirements.
So here I share the sample code with steps that I made as per my knowledge to use a flutter number pad widget without any package.
Here is a A set of Flutter widgets providing Numpad input functionality without the software keyboard.
Let's start
Simply create a KeyPad widget class that contains different parameters and return functions like this.
pinController : It’s a TextEditingController() function that returns the input text value.
onChange : This function called while typing anything and change the input value
onSubmit : This function called when you hit the submit button
isPinLogin : It’s a bool flag used to hide and show the submit button
KeyPad Class
import 'package:flutter/material.dart'; class KeyPad extends StatelessWidget{ double buttonSize = 60.0; final TextEditingController pinController; final Function onChange; final Function onSubmit; final bool isPinLogin; KeyPad({this.onChange, this.onSubmit, this.pinController, this.isPinLogin}); @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.only(left: 30, right: 30), child: Column( children: [ SizedBox(height: 20), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ buttonWidget('1'), buttonWidget('2'), buttonWidget('3'), ], ), SizedBox(height: 20), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ buttonWidget('4'), buttonWidget('5'), buttonWidget('6'), ], ), SizedBox(height: 20), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ buttonWidget('7'), buttonWidget('8'), buttonWidget('9'), ], ), SizedBox(height: 20), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ iconButtonWidget(Icons.backspace, () { if (pinController.text.length > 0) { pinController.text = pinController.text .substring(0, pinController.text.length - 1); } if (pinController.text.length > 5) { pinController.text = pinController.text.substring(0, 3); } onChange(pinController.text); }), buttonWidget('0'), !isPinLogin ? iconButtonWidget(Icons.check_circle, () { if (pinController.text.length > 5) { pinController.text = pinController.text.substring(0, 3); } onSubmit(pinController.text); }) : Container( width: buttonSize, ), ], ), ], ), ); } buttonWidget(String buttonText) { return Container( height: buttonSize, width: buttonSize, child: RaisedButton( color: Colors.blue, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(buttonSize / 2), ), focusColor: Colors.blue, hoverColor: Colors.blue, highlightColor: Colors.blue, onPressed: () { if (pinController.text.length <= 3) { pinController.text = pinController.text + buttonText; onChange(pinController.text); } }, child: Center( child: Text( buttonText, style: TextStyle(fontWeight: FontWeight.bold,color: Colors.white,fontSize: 25), ), ), ), ); } iconButtonWidget(IconData icon, Function function) { return InkWell( onTap: function, child: Container( height: buttonSize, width: buttonSize, decoration: BoxDecoration(color: Colors.orangeAccent, shape: BoxShape.circle), child: Center( child: Icon(icon, size: 30, color: Colors.white, ), ), ), ); } }
Main.dart Class
This is the main root class of any flutter application project. It contains the main method with the runApp function.
import 'package:flutter/material.dart'; import 'package:dca/screens/unlock_option/code_unlock.dart'; void main() => runApp(new MaterialApp( debugShowCheckedModeBanner: false, home: CodeUnlock() ) );
How to use
Simply create a Keypad widget and pass the required params:
KeyPad( pinController: pinController, isPinLogin: false, onChange: (String pin) { }, onSubmit: (String pin) { }, ),
CodeUnlock Class
The simplest implementation involves creating a pinController and passing it to a Keypad and a TextField. Also import the KeyPad class to use it.
import 'dart:math'; import 'package:flutter/material.dart'; import 'KeyPad.dart'; class CodeUnlock extends StatefulWidget { @override _CodeUnlockState createState() => _CodeUnlockState(); } class _CodeUnlockState extends State { String displayCode; TextEditingController pinController = TextEditingController(); @override void initState() { // TODO: implement initState super.initState(); displayCode = getNextCode(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('CODE UNLOCK'), backgroundColor: Colors.blue, ), body: Builder( builder: (context) => Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: EdgeInsets.only(bottom: 20), child: Text( displayCode, style: TextStyle( color: Colors.blue, fontSize: 50, fontWeight: FontWeight.bold // fontFamily: AppTextStyle.robotoBold ), ), ), Padding( padding: EdgeInsets.only(left:50, right:50, bottom: 15), child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(5), color: Colors.orangeAccent, border: Border.all(color: Colors.orangeAccent, width: 1.5)), child: Padding( padding: EdgeInsets.only(left: 15), child: TextField( controller: pinController, readOnly: true, textAlign: TextAlign.center, style: TextStyle( color: Colors.black, fontSize: 26, // fontWeight: FontWeight.bold // fontFamily: AppTextStyle.robotoBold ), decoration: InputDecoration( border: InputBorder.none, hintText: 'Enter PIN', ), // controller: userDisplayName, ), ), ), ), KeyPad( pinController: pinController, isPinLogin: false, onChange: (String pin) { pinController.text = pin; print('${pinController.text}'); setState(() {}); }, onSubmit: (String pin) { if (pin.length != 4) { (pin.length == 0) ? showInSnackBar('Please Enter Pin') : showInSnackBar('Wrong Pin'); return; } else { pinController.text = pin; if (pinController.text == displayCode){ showInSnackBar('Pin Match'); setState(() { displayCode = getNextCode(); }); }else{ showInSnackBar('Wrong pin'); } print('Pin is ${pinController.text}'); } }, ), ], ), ), ), ); } void showInSnackBar(String value) { Scaffold.of(context).showSnackBar(new SnackBar( content: new Text(value) )); } getNextCode(){ pinController.text = ''; var rng = new Random(); var code = (rng.nextInt(9000) + 1000).toString(); print('Random No is : $code'); return code; } }
Output:
You can see in the code I also wrote the code to automatically generate the new code while the code entered by you matches with the display code. Otherwise it will display the error message Wrong pin
If the pin entered by you matches with the displayed code then it will display the message Pin Match and auto display the auto generated new code.
Video Output:
Flutter Numberpad Widget
Nikunj is a forward thinking developer at Elitech Systems, offering more than four years of experience building, integrating, testing and supporting, iOS and Flutter applications. He’s a big fan of cross-platform programming and an expert in new ways to create silky smooth iOS applications & Cross Platform applications. His framework of choice is Swift. When he is not building and scaling back end systems, you’ll find him to reading or writing on technology and photography.
Comments are closed.