May

Flutter Pin Input Text Field

Flutter Pin Input Text Field:

In this tutorial, we are going to learn to create the text fields that hide the user entered value as a pin. this Flutter Pin Input Text Field used for users to enter the input values while filling an online application form including the pin to validate the user when the user login to it again. the pin number is unique or specific to the particular user.

We can create different types of pin input text fields in Flutter. Here we are creating three different types of pin input text fields in Flutter.

UnderlineDecoration
BoxLooseDecoration
BoxTightDecoration

Creating the Flutter Pin Input Text Fields:

Add the dependency package:

To create pin input text fields in flutter we need to add the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
pin_input_text_field: ^0.3.1

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter packages get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:pin_input_text_field/pin_input_text_field.dart';

Flutter PinInputTextField Attributes:

Use the below attributes to create customizable pin input text fields in Flutter.

Attribute Name	Example Value	Description
pinLength	6	Used to define the max length of the pin, the default value is 6
onSubmit	(String pin){}	The callback method will be executed when user click done after entering the pin value,
decoration	BoxLooseDecoration	Used for decorating the pin, there are 3 styles we can use, by default BoxLooseDecoration
inputFormatters	WhitelistingTextInputFormatter.digitsOnly	This will be used WhitelistingTextInputFormatter.digitsOnly
keyboardType	TextInputType.phone	Here we are selecting the phone for input the pin values, TextInputType.phone
pinEditingController	PinEditingController	Controls the pin being edited. If null, this widget will create its own PinEditingController
autoFocus	false	Same like TextField’s autoFocus, by default the value is false
focusNode	FocusNode	Same as TextField’s focusNode
textInputAction	TextInputAction.done	Same as TextField’s to perform textInputAction

Use the below code to create underlined pin input text fields in Flutter.

case PinEntryType.underline:
setState(() {
_pinDecoration = UnderlineDecoration(
textStyle: _textStyle,
enteredColor: Colors.deepOrange,
obscureStyle: ObscureStyle(
isTextObscure: _obscureEnable,
obscureText: '*',
),
);
});

Use the below example code to create box tight pin input text fields in Flutter.

PinEntryType.boxTight:
setState(() {
_pinDecoration = BoxTightDecoration(
textStyle: _textStyle,
solidColor: _solidEnable ? _solidColor : null,
obscureStyle: ObscureStyle(
isTextObscure: _obscureEnable,
obscureText: '*',
),
);
});

Use the below example code to create a box loose pin input text fields in Flutter. Using an obscure method only we are hiding the entered value

PinEntryType.boxLoose:
setState(() {
_pinDecoration = BoxLooseDecoration(
textStyle: _textStyle,
enteredColor: Colors.deepOrange,
solidColor: _solidEnable ? _solidColor : null,
obscureStyle: ObscureStyle(
isTextObscure: _obscureEnable,
obscureText: '*',
),
);
});

Complete Example code To create a Pin Input Text Fileds in Flutter.

Copy and Paste the below code into your main.dart file

main.dart

import 'package:flutter/material.dart';
import 'package:pin_input_text_field/pin_input_text_field.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Pin Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.

// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".

final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
/// Default max pin length.
static final int _pinLength = 4;

/// Default Text style.
static final TextStyle _textStyle = TextStyle(
color: Colors.black,
fontSize: 24,
);

/// Control the input text field.
PinEditingController _pinEditingController =
PinEditingController(pinLength: _pinLength, autoDispose: false);

/// Decorate the outside of the Pin.
PinDecoration _pinDecoration = UnderlineDecoration(
textStyle: _textStyle,
enteredColor: Colors.deepOrange,
);

/// Control whether show the obscureCode.
bool _obscureEnable = false;

PinEntryType _pinEntryType = PinEntryType.underline;
Color _solidColor = Colors.purpleAccent;
bool _solidEnable = false;

/// Set a random pin to the textField.
void _setPinValue() {
_pinEditingController.text = _generateRandomPin();
}

String _generateRandomPin() {
StringBuffer sb = StringBuffer();
for (int i = 0; i < _pinLength; i++) { sb.write("$i"); } return sb.toString(); } @override void initState() { _pinEditingController.addListener(() { debugPrint('changed pin:${_pinEditingController.text}'); }); super.initState(); } @override void dispose() { _pinEditingController.dispose(); super.dispose(); } void _selectedMenu(PinEntryType type) { _pinEntryType = type; switch (type) { case PinEntryType.underline: setState(() { _pinDecoration = UnderlineDecoration( textStyle: _textStyle, enteredColor: Colors.deepOrange, obscureStyle: ObscureStyle( isTextObscure: _obscureEnable, obscureText: '*', ), ); }); break; case PinEntryType.boxTight: setState(() { _pinDecoration = BoxTightDecoration( textStyle: _textStyle, solidColor: _solidEnable ? _solidColor : null, obscureStyle: ObscureStyle( isTextObscure: _obscureEnable, obscureText: '*', ), ); }); break; case PinEntryType.boxLoose: setState(() { _pinDecoration = BoxLooseDecoration( textStyle: _textStyle, enteredColor: Colors.deepOrange, solidColor: _solidEnable ? _solidColor : null, obscureStyle: ObscureStyle( isTextObscure: _obscureEnable, obscureText: '*', ), ); }); break; } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), actions: [
PopupMenuButton(
icon: Icon(Icons.more_vert),
onSelected: _selectedMenu,
itemBuilder: (context) {
return [
PopupMenuItem(
child: Text('underline decoration'),
value: PinEntryType.underline,
),
PopupMenuItem(
child: Text('box loose decoration'),
value: PinEntryType.boxLoose,
),
PopupMenuItem(
child: Text('box tight decoration'),
value: PinEntryType.boxTight,
),
];
},
),
],
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'obscureEnabled',
style: TextStyle(
fontSize: 18,
),
),
SizedBox(
width: 12,
),
Checkbox(
value: _obscureEnable,
onChanged: (enable) {
setState(() {
_obscureEnable = enable;
_selectedMenu(_pinEntryType);
});
}),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'solidEnabled',
style: TextStyle(
fontSize: 18,
),
),
SizedBox(
width: 12,
),
Checkbox(
value: _solidEnable,
onChanged: (enable) {
setState(() {
_solidEnable = enable;
_selectedMenu(_pinEntryType);
});
}),
],
),
Padding(
padding: const EdgeInsets.only(left: 12, right: 12, top: 32),
child: PinInputTextField(
pinLength: _pinLength,
decoration: _pinDecoration,
pinEditingController: _pinEditingController,
autoFocus: true,
textInputAction: TextInputAction.go,
onSubmit: (pin) {
debugPrint('submit pin:$pin');
},
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _setPinValue,
tooltip: 'setPinValue',
child: Icon(Icons.border_color),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

Congratulations You Have Learned Creating Pin Input TextFields in Flutter ….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext