otp_pin_field 1.2.8 otp_pin_field: ^1.2.8 copied to clipboard
A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs.
import 'package:example_otp_pin_field/next_page.dart';
import 'package:flutter/material.dart';
import 'package:otp_pin_field/otp_pin_field.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Otp Pin Field',
// debugShowMaterialGrid: false,
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Otp Pin Field Example'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
/// Otp pin Controller
final _otpPinFieldController = GlobalKey<OtpPinFieldState>();
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: hideKeyboard,
child: Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
OtpPinField(
key: _otpPinFieldController,
textInputAction: TextInputAction.done,
onSubmit: (text) {
print('Entered pin is $text');
},
onChange: (text) {
print('Enter on change pin is $text');
},
/// to decorate your Otp_Pin_Field
otpPinFieldStyle: OtpPinFieldStyle(
defaultFieldBackgroundColor: Colors.white,
activeFieldBackgroundColor: Colors.white,
filledFieldBackgroundColor: Colors.white,
fieldBorderWidth: 1,
fieldBorderRadius: 10,
activeFieldBoxShadow: [
new BoxShadow(
color: Colors.blue.withOpacity(0.8),
offset: Offset(0, 3),
),
],
filledFieldBoxShadow: [
new BoxShadow(
color: Colors.blue.withOpacity(0.5),
offset: Offset(0, 3),
),
],
defaultFieldBoxShadow: [
new BoxShadow(
color: Colors.blue.withOpacity(0.5),
offset: Offset(0, 3),
),
],
),
maxLength: 6,
cursorColor: Colors.blue.withOpacity(0.8),
cursorWidth: 3,
mainAxisAlignment: MainAxisAlignment.center,
otpPinFieldDecoration: OtpPinFieldDecoration.custom,
),
],
),
),
);
}
}