Hello guys, in this post we are going to learn how to design PIN input fileds in Flutter. With pin_code_fields: ^2.3.0+3 plugin we can achive this one Lets check the Image below Now we are going to design this Lets check the code Add pin_code_fields: ^2.3.0+3 in pubspec.yaml file under dev_dependencies import 'package:pin_code_fields/pin_code_fields.dart' in your dart file import 'package:pin_code_fields/pin_code_fields.dart' Here i have used background image which is added inside assets folder with name backgrnd.png. To access this image file in dart file we need to add this file path in pubspec.yaml file Now lets add PinCodeTextField widget to our dart file where we are going to show the PIN fileds. PinCodeTextField( ) Here we are going to use 4 digits PIN number. By using the length property we can fix the PIN length. Properties of PinCodeTextField Open Number Keyboard and Text keybord By using the textInputType we can achieve to show only numbers with signed/ decimal or Text keyboard. How to hide/show PIN value? By using the obsecureText property we can achieve this. Now Check Complete code
dev_dependencies:
pin_code_fields: ^2.3.0+3
assets:
- assets/backgrnd.png
length: 4,
obsecureText: true,
animationType: AnimationType.fade,
shape: PinCodeFieldShape.box,
animationDuration: Duration(milliseconds: 300),
borderRadius: BorderRadius.circular(5),
fieldHeight: 50,
fieldWidth:50,
Property
Default/Meaning
length
@required, defines the length of the PIn
obsecureText
default value is false, if its true will hide the pin
onCompleted
returns once all PIN fileds entered
fieldHeight
define the height of the field
fieldWidth
define the width of the field
activeColor
Colors of the input fields which have inputs. Default is [Colors.green]
selectedColor
Color of the input field which is currently selected. Default is [Colors.blue]
inactiveColor
Colors of the input fields which don't have inputs. Default is [Colors.red]
enabled
Enable or disable the Field. Default is [true]
animationType
[AnimationType] for the text to appear in the pin code field. Default is [AnimationType.slide]
textInputType
[TextInputType] for the pin code fields. default is [TextInputType.visiblePassword]
autoFocus
If the pin code field should be autofocused or not. Default is [false]
controller
[TextEditingController] to control the text manually. Sets a default [TextEditingController()] object if none given
obsecureText: true,
obsecureText: false,
import 'package:flutter/material.dart';
import 'package:pin_code_fields/pin_code_fields.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: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var value;
@override
void initState() {
// TODO: implement initState
super.initState();
value="";
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return SafeArea(
child: Scaffold(
body: Container(
child: Stack(
children: <Widget>[
Positioned(child: Image.asset("assets/backgrnd.png",fit: BoxFit.fitHeight,),
left: 0,right: 0,)
,
Center(
child: Container(
width: 300,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Enter your 4 digit OTP ",style: TextStyle(fontSize: 20,color: Colors.indigoAccent[700]),),
SizedBox(height: 30,),
PinCodeTextField(
onCompleted:(_value){
print("values entered $value");
value=_value;
},
textInputType: TextInputType.emailAddress,
length: 4,
obsecureText: true,
animationType: AnimationType.fade,
shape: PinCodeFieldShape.box,
animationDuration: Duration(milliseconds: 300),
borderRadius: BorderRadius.circular(5),
fieldHeight: 50,
fieldWidth:50,
),
SizedBox(height: 30,),
RaisedButton(
color:Colors.indigoAccent[700],
onPressed: (){
Scaffold.of(context).showSnackBar(SnackBar(content: Text("Entered PIN $value")));
},child: Text("Submit",style: TextStyle(fontSize: 20,color: Colors.white)),)
],
),
),
),
),
],
),
),
),
);
}
Article Contributed By :
|
|
|
|
4156 Views |