animated_pin_input_text_field 1.0.0 animated_pin_input_text_field: ^1.0.0 copied to clipboard
A Flutter package for creating an animated and customizable pin/OTP input text field.
import 'package:animated_pin_input_text_field/animated_pin_input_text_field.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'PinInputTextField Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
),
home: const MyHomePage(title: 'PinInputTextField Demo Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0XFFF6F7F8),
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
title: Text(
widget.title,
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Normal case:',
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(
height: 8,
),
PinInputTextField(
pinLength: 6,
onChanged: (String value) {
debugPrint(value);
},
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Squared fields (no border) :',
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(
height: 8,
),
PinInputTextField(
border: const Border.fromBorderSide(BorderSide.none),
automaticFocus: false,
aspectRatio: 1,
pinLength: 6,
textStyle: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
onChanged: (String value) {
debugPrint(value);
},
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Circular fields:',
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(
height: 8,
),
PinInputTextField(
padding: const EdgeInsets.all(2),
boxShape: BoxShape.circle,
automaticFocus: false,
obscureText: true,
aspectRatio: 1,
pinLength: 6,
onChanged: (String value) {
debugPrint(value);
},
),
],
),
],
),
),
);
}
}