https://github.com/tientham/fl_pin_code
Simple and beautiful widget for displaying Pin codes for Flutter applications.
https://github.com/tientham/fl_pin_code
flutter flutter-library
Last synced: about 1 month ago
JSON representation
Simple and beautiful widget for displaying Pin codes for Flutter applications.
- Host: GitHub
- URL: https://github.com/tientham/fl_pin_code
- Owner: tientham
- License: bsd-3-clause
- Created: 2021-03-10T15:56:50.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-03-16T09:22:34.000Z (about 5 years ago)
- Last Synced: 2026-03-25T01:57:56.912Z (3 months ago)
- Topics: flutter, flutter-library
- Language: Dart
- Homepage: https://pub.dev/packages/fl_pin_code
- Size: 89.8 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# fl_pin_code
[](https://pub.dev/packages/fl_pin_code)
[](https://opensource.org/licenses/BSD-3-Clause)
# fl_pin_code
fl_pin_code helps to display Pin codes for Flutter applications.
## Feature 👇👇
* obscure support
* auto moving focus
* field shapes (box, underline)
* null-safety
## Installing 🔧
Install the latest version from [pub](https://pub.dartlang.org/packages/fl_pin_code).
# Installing
## Use this package as a library
### 1. Depend on it
Add this to your package's pubspec.yaml file:
```
dependencies:
fl_pin_code: ^0.0.9
```
### 2. Install it
You can install packages from the command line:
with Flutter:
```
$ flutter packages get
```
Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.
### 3. Import it
Now in your Dart code, you can use:
```
import 'package:fl_pin_code/fl_pin_code.dart';
```
### Usage
```
PinCode(
numberOfFields: 5,
fieldWidth: 40.0,
style: TextStyle(color: Colors.black, fontSize: 15),
fieldStyle: PinCodeStyle.box),
PinCode(
keyboardType: TextInputType.number,
isObscure: true,
numberOfFields: 5,
fieldWidth: 40.0,
style: TextStyle(color: Colors.black, fontSize: 15),
fieldStyle: PinCodeStyle.box,
onCompleted: (text) {
setState(() {
hash.pinHash = text;
});
},
),
// this is taken from sample project.
PinCode(
numberOfFields: 5,
fieldWidth: 40.0,
style: TextStyle(color: Colors.black, fontSize: 15),
fieldStyle: PinCodeStyle.box,
onCompleted: (text) {
if (text.trim() == "11111") {
setState(() {
_passwordObscureText = false;
});
} else {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Please insert 11111 to unlock')));
}
Navigator.of(context).pop();
},
// onChanged: (_) {},
)
```