James
PinPut
Pin input is a kind of common password strategy used in mobile applications nowadays. But implementing that kind of widget for Flutter from scratch can be time-consuming. But there are some libraries which are implemented by the Flutter community, and you can just use those to implement Pin code input screen. Now, check the PIN input field widget for Flutter with paste from clipboard functionality here.
This widget maintains the whole width of the parent widget and layouts textfields in the optimal way to produce a PIN code input field look. It accepts strings of any length and calls the onSubmit method when all fields are filled.
Properties
| Property | Default/Meaning |
|---|---|
| onSubmit | @required Function |
| fieldsCount | @required number |
| isTextObscure | false |
| textStyle | TextStyle(fontSize: 30) |
| spaceBetween | space between fields Default: 10.0 |
| clearButtonIcon | Icon(Icons.backspace, size: 30) |
| pasteButtonIcon | Icon(Icons.content_paste, size: 30) |
| unFocusWhen | Default is False, True to hide keyboard |
| inputDecoration | Ability to style field’s border, padding etc… |
| keybaordType | number |
| keyboardAction | next |
| actionButtonEnabled | true |
| autoFocus | true |
| textCapitalization | TextCapitalization.none |
Example
Import the package:
import 'package:flutter/material.dart';
import 'package:pinput/pin_put/pin_put.dart';
void main() => runApp(PinPutTest());
class PinPutTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.green,
hintColor: Colors.green,
),
home: Scaffold(
body: Builder(
builder: (context) => Padding(
padding: const EdgeInsets.all(40.0),
child: Center(
child: PinPut(
fieldsCount: 4,
onSubmit: (String pin) => _showSnackBar(pin, context),
),
),
),
)));
}
void _showSnackBar(String pin, BuildContext context) {
final snackBar = SnackBar(
duration: Duration(seconds: 5),
content: Container(
height: 80.0,
child: Center(
child: Text(
'Pin Submitted. Value: $pin',
style: TextStyle(fontSize: 25.0),
),
)),
backgroundColor: Colors.greenAccent,
);
Scaffold.of(context).showSnackBar(snackBar);
}
}
GitHub
https://github.com/Tkko/Flutter_PinPut
