Flutterexperts

Flutter is Google’s UI tool stash for making excellent, natively compiled iOS and Android applications from a single code base. To construct any application, we start with widgets — The building square of flutter applications. Widgets portray what their view ought to resemble given their present design and state. It incorporates a text widget, row widget, column widget, container widget, and some more.

In this article, we will explore the Pin Code Fileds in flutter using the flutter_pin_code_fields_package. With the help of the package, we can easily achieve flutter pin code fields. So let’s get started.

---

Table Of Contents :

Flutter

Pin Code Fileds

Attributes

Implementation

Code Implement

Code File

Conclusion

---

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload”

Pin Code Fields :

The flutter pin code Fields library helps us to create a customizable field, we use it for any login pin or OTP. In this library, we can make the input text of animated type.

Demo Module :

Attributes:

Some Basic Attributes:

• > length: We use the length property to define the total pin code field.
• > fieldHeight: We use the field height property to reduce and increase the height of the field.
• > fieldWidth: We use the field width property to reduce and increase the width of the field.
• > obscureText: Use the obscure text property to hide the user’s input text.
• > margin: The margin property provides margin between fields.
• > padding: The padding property provides padding between fields.

Implementation :

You need to implement it in your code respectively :

Step 1: Add dependencies.

Add dependencies to pubspec — yaml file.

dependencies:
flutter_pin_code_fields: ^1.1.0

Step 2: import the package :

import 'package:flutter_pin_code_fields/flutter_pin_code_fields.dart';

Step 3: Run flutter package get

How to implement code in dart file :

Create a new dart file called pin_code_filed_demo.dart inside the libfolder.

Before using Flutter Pincode Fields, we have taken a container whose column widget is used, inside it the default Pincode Fields, Obscure Fields, Custom Pin Code Fields, and Animated Fields.

Text(
'Default Pincode Fields',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 40.0,
),
PinCodeFields(
length: 4,
controller: newTextEditingController,
focusNode: focusNode,
onComplete: (result) {
// Your logic with code
print(result);
},
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File :

import 'package:flutter/material.dart';
import 'package:flutter_pin_code_fields/flutter_pin_code_fields.dart';
class FlutterPinCodeFields extends StatefulWidget {
@override
_FlutterPinCodeFieldsState createState() => _FlutterPinCodeFieldsState();
}

class _FlutterPinCodeFieldsState extends State<FlutterPinCodeFields> {
TextEditingController newTextEditingController = TextEditingController();
FocusNode focusNode = FocusNode();

@override
void dispose() {
newTextEditingController.dispose();
focusNode.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Pin Code Fields Demo'),
),
body: Container(
margin:EdgeInsets.only(left:20,right:20),
child:SingleChildScrollView(
child:Column(
children: <Widget>[
SizedBox(
height: 30.0,
),
Text(
'Default Pincode Fields',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 40.0,
),
PinCodeFields(
length: 4,
controller: newTextEditingController,
focusNode: focusNode,
onComplete: (result) {
// Your logic with code
print(result);
},
),
SizedBox(
height: 80.0,
),
Text(
'Obscure Pincode Fields',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 10.0,
),
PinCodeFields(
length:4,
obscureText: true,
obscureCharacter: '❌',
onComplete: (text) {
// Your logic with pin code
print(text);
},
),
SizedBox(
height: 80.0,
),
Text(
'Custom Pincode Fields',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 10.0,
),
PinCodeFields(
length: 4,
fieldBorderStyle: FieldBorderStyle.Square,
responsive: false,
fieldHeight:40.0,
fieldWidth: 40.0,
borderWidth:1.0,
activeBorderColor: Colors.pink,
activeBackgroundColor: Colors.pink.shade100,
borderRadius: BorderRadius.circular(10.0),
keyboardType: TextInputType.number,
autoHideKeyboard: false,
fieldBackgroundColor: Colors.black12,
borderColor: Colors.black38,
textStyle: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
onComplete: (output) {
// Your logic with pin code
print(output);
},
),
SizedBox(
height: 80.0,
),
Text(
'Animated Pincode Fields',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 10.0,
),
PinCodeFields(
length: 4,
animationDuration: const Duration(milliseconds: 200),
animationCurve: Curves.easeInOut,
switchInAnimationCurve: Curves.easeIn,
switchOutAnimationCurve: Curves.easeOut,
animation: Animations.SlideInDown,
onComplete: (result) {
// Your logic with code
print(result);
},
),
SizedBox(
height: 50.0,
),
],
),
),
),
);
}
}

Conclusion :

In this article, I have explained a Pin Code Fields in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Pin Code Fields from our side.

I hope this blog will provide you with sufficient information in Trying up the Pin Code Fields in your flutter project. We will show you the Pin Code Fields is?, and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.