Flutter Numberpad Widget without any package for Android & iOS

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;
 }
}