{"id":13465519,"url":"https://github.com/LiewJunTung/pin_code_text_field","last_synced_at":"2025-03-25T16:32:12.570Z","repository":{"id":33747368,"uuid":"153227977","full_name":"LiewJunTung/pin_code_text_field","owner":"LiewJunTung","description":"A highly customisable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.","archived":true,"fork":false,"pushed_at":"2024-01-30T11:12:12.000Z","size":3008,"stargazers_count":376,"open_issues_count":29,"forks_count":77,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-07-31T15:01:33.760Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiewJunTung.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-16T05:33:25.000Z","updated_at":"2024-07-24T15:01:12.000Z","dependencies_parsed_at":"2024-06-18T15:15:21.924Z","dependency_job_id":"d2bd2352-2d9c-41bd-8ece-0249458de793","html_url":"https://github.com/LiewJunTung/pin_code_text_field","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiewJunTung%2Fpin_code_text_field","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiewJunTung%2Fpin_code_text_field/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiewJunTung%2Fpin_code_text_field/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiewJunTung%2Fpin_code_text_field/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiewJunTung","download_url":"https://codeload.github.com/LiewJunTung/pin_code_text_field/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222088571,"owners_count":16928979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T15:00:31.517Z","updated_at":"2024-10-29T17:31:08.295Z","avatar_url":"https://github.com/LiewJunTung.png","language":"Dart","funding_links":[],"categories":["Components","组件","Dart","UI [🔝](#readme)","Packages"],"sub_categories":["UI"],"readme":"[![Pub](https://img.shields.io/pub/v/pin_code_text_field.svg)](https://pub.dartlang.org/packages/pin_code_text_field)\n[![Awesome Flutter](https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true\u0026style=flat-square)](https://github.com/Solido/awesome-flutter)\n\n\n# pin_code_text_field\n\nIt's a beautiful and highly customizable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.\n\n# Usage\n## Use this package as a library\n1. Depend on it\nAdd this to your package's pubspec.yaml file:\n```\ndependencies:\n  pin_code_text_field: \u003cVERSION\u003e\n```\n2. Install it\nYou can install packages from the command line:\nwith Flutter:\n```\n$ flutter packages get\n```\nAlternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.\n\n3. Import it\nNow in your Dart code, you can use:\n```\nimport 'package:pin_code_text_field/pin_code_text_field.dart';\n```\n## API\n| name | type | default | description |\n| --- | --- | --- | --- |\n| isCupertino | bool | false | Application wrapped in `CupertinoApp` instead `MaterialApp` |\n| maxLength | int | 4 | The total length of pin number \u0026 the number of pin boxes. |\n| hideCharacter | bool | false | Show or hide the pin code. |\n| highlight | bool | false | highlight the focused pin box. |\n| highlightAnimation | bool | false | animated highlight of the focused pin box. |\n| highlightAnimationBeginColor | Color | Colors.black | the starting color of the animated highlight. |\n| highlightAnimationEndColor | Color | Color.white | the ending color of the animated highlight. |\n| highlightAnimationDuration | Duration | 500ms | the duration of the highlight animation. |\n| highlightColor | Color | Colors.black | Set color of the focused pin box. |\n| pinBoxDecoration | BoxDecoration| ProvidedPinBoxDecoration._defaultPinBoxDecoration | Customization for the individual pin boxes. Check `ProvidedPinBoxDecoration` for possible options. |\n| pinTextStyle | TextStyle | | TextStyle for styling pin characters. |\n| maskCharacter | String | \"\\u25CF\" | Special character to mask the pin code. Will only work if `hideCharacter` is set to `true`. |\n| pinBoxHeight | double | 70.0 | Height of pin boxes. |\n| pinBoxWidth | double | 70.0 | Width of pin boxes. |\n| onDone | void Function(String) | | Callback when the max length of pin code is reached. |\n| hasTextBorderColor | Color | Colors.black | Set color of pin box containing text. |\n| pinTextAnimatedSwitcherTransition | Function(Widget child, Animation\u003cdouble\u003e animation) | | Animation of text appearing/disappearing, you can write your own or use a few presets: 1. PinCodeTextField.awesomeTransition 2. PinCodeTextField.defaultScalingTransition  3. PinCodeTextField.defaultRotateTransition|\n| pinTextAnimatedSwitcherDuration | Duration | const Duration() | Duration of pinTextAnimatedSwitcherTransition. Check `ProvidedPinBoxTextAnimation` for possible options. |\n| errorBorderColor | Color | Colors.red | Highlight all textboxes to this color if hasError is set to `true`\n| onTextChange | Function(String) | | callback that returns a text on input |\n| hasError | bool | false | set all border color to `errorBorderColor` |\n| autofocus | bool | false | Autofocus on view entered |\n| wrapAlignment | WrapAlignment | WrapAlignment.start | Alignment of the wrapped pin boxes |\n| textDirection | TextDirection | TextDirection.ltr | The direction of the pin code |\n| keyboardType | TextInputType | TextInputType.number | The type of the input keyboard |\n| pinBoxColor | Color | null| Color of the pin boxes (Will be overridden by custom PinBoxDecoration) |\n| pinBoxBorderWidth | double | 2 | Border Width of pin boxes |\n| pinBoxRadius | double | 0 | The type of the input keyboard |\n| hideDefaultKeyboard | boolean | false | The type of hide default keyboard |\n| highlightPinBoxColor | Color | false | The background color of the pin box |\n| hasUnderline | bool | false | Added underline to individual pin box |\n\n## Example\nrefer to `example/lib/main.dart`\n\n## Wishlist\n1. ~~Localization (L-R, R-L)~~\n2. ~~Highlight animation~~\n3. ~~Pin Box animation~~\n4. BoxDecoratorBuilder for customizing individual pin boxes\n\n## Tips and Tricks:\n1. Copy and pasting\n   Wrap the `PinCodeTextField` in `GestureDetector`, the launch an AlertDialog to\n   access the `Clipboard` and paste the strings to the `TextEditController` of \n   the `PinCodeTextField`\n\n## Contributors\n1. [Liew Jun Tung](https://github.com/LiewJunTung)\n2. [Serge Shkurko](https://github.com/SergeShkurko)\n3. [Angga Dwi Arifandi](https://github.com/blackmenthor)\n4. [MozesMa](https://github.com/MozesMa)\n5. [jpeiffer](https://github.com/jpeiffer)\n6. [Thiago Porto](https://github.com/ThiagoNP)\n6. [Samuel](https://github.com/samuelg123)\n\nStar 🌟 to show support!\n\n\u003cimg src=\"https://raw.githubusercontent.com/LiewJunTung/Pin-Code-Text-Field/master/image/phoneusage.gif\" alt=\"pin usage\" width=\"250\"/\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/LiewJunTung/Pin-Code-Text-Field/master/image/ipad.gif\" alt=\"pin usage\" width=\"500\"/\u003e\n\n## More information\n[Pub package](https://pub.dartlang.org/packages/pin_code_text_field)\n[Flutter documentation](https://flutter.io/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLiewJunTung%2Fpin_code_text_field","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLiewJunTung%2Fpin_code_text_field","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLiewJunTung%2Fpin_code_text_field/lists"}