[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9559":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":42,"readmeContent":43,"aiSummary":44,"trendingCount":16,"starSnapshotCount":16,"syncStatus":45,"lastSyncTime":46,"discoverSource":47},9559,"Flutter_Pinput","Tkko\u002FFlutter_Pinput","Tkko","Flutter package to create Pin code input text field with every pixel customization possibility 🎨 with beautiful animations, iOS autofill, Android autofill","https:\u002F\u002Fpub.dev\u002Fpackages\u002Fpinput",null,"Dart",855,214,7,32,0,1,11,"MIT License",false,"master",true,[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41],"android-autofill","autofill","code","flutter","flutter-package","flutter-pin-code","flutter-widget","ios-autofill","otp","phone-verification","pin","pincode","sms","smsautofill","smsretrieverapi","smsuserconsentapi","verification","verification-code","2026-06-12 02:02:09","\u003Cdiv align=\"center\">  \n \u003Ch1 align=\"center\" style=\"font-size: 70px;\">Flutter pin code input\u003C\u002Fh1>\n\n\u003Cdiv align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fjust-url.short.gy\u002Fprelude\">\n        \u003Cimg width=\"301\" alt=\"Prelude SMS API\"\n            src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fa8f90a17-8c2f-4392-a6ad-665cf1d57809\">\n    \u003C\u002Fa>\n    \u003Cbr>\n    \u003Ca href=\"https:\u002F\u002Fko-fi.com\u002Fflutterman\">\n        \u003Cimg width=\"300\"\n            src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F26390946\u002F161375567-9e14cd0e-1675-4896-a576-a449b0bcd293.png\">\n    \u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003Cdiv align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fwww.buymeacoffee.com\u002Ffman\">\n        \u003Cimg width=\"150\" alt=\"buymeacoffee\"\n            src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F26390946\u002F161375563-69c634fd-89d2-45ac-addd-931b03996b34.png\">\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fko-fi.com\u002Fflutterman\">\n        \u003Cimg width=\"150\" alt=\"Ko-fi\"\n            src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F26390946\u002F161375565-e7d64410-bbcf-4a28-896b-7514e106478e.png\">\n    \u003C\u002Fa>\n\u003C\u002Fdiv>\n\n\u003Ch3 align=\"center\" style=\"font-size: 35px;\">Need anything Flutter related? Reach out on \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fthornike\u002F\">LinkedIn\u003C\u002Fa>\n\u003C\u002Fh3>\n\n[![Pub package](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fpinput.svg)](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fpinput)\n[![Github starts](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Ftkko\u002Fflutter_pinput.svg?style=flat&logo=github&colorB=deeppink&label=stars)](https:\u002F\u002Fgithub.com\u002Ftkko\u002Fflutter_pinput)\n[![style: effective dart](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fstyle-effective_dart-40c4ff.svg)](https:\u002F\u002Fgithub.com\u002Ftenhobi\u002Feffective_dart)\n[![pub package](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-purple.svg)](https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n\n\u003C\u002Fdiv>\n\nFlutter Pinput is a package that provides an easy-to-use and customizable Pin code input field. It offers several features such as animated decoration switching, form validation, SMS autofill, custom cursor, copying from clipboard, and more. It also provides beautiful examples that you can choose from.\n\n## Features:\n- Animated Decoration Switching\n- Form validation\n- SMS Autofill on iOS\n- SMS Autofill on Android\n- Standard Cursor\n- Custom Cursor\n- Cursor Animation\n- Copy From Clipboard\n- Ready For Custom Keyboard\n- Standard Paste option\n- Obscuring Character\n- Obscuring Widget\n- Haptic Feedback\n- Close Keyboard After Completion\n- Beautiful [Examples](https:\u002F\u002Fgithub.com\u002FTkko\u002FFlutter_PinPut\u002Ftree\u002Fmaster\u002Fexample\u002Flib)\n\n## Support\n\nPRs Welcome\n\nDiscord [Channel](https:\u002F\u002Frebrand.ly\u002Fqwc3s0d)\n\n[Examples](https:\u002F\u002Fgithub.com\u002FTkko\u002FFlutter_PinPut\u002Ftree\u002Fmaster\u002Fexample\u002Flib) app on Github has multiple templates to choose from\n\nDon't forget to give it a star ⭐\n\n## Demo\n\n| [Live Demo](https:\u002F\u002Frebrand.ly\u002F6390b8) | Rounded With Shadows | Rounded With Cursor |\n| - | - | - |\n| \u003Ca href=\"https:\u002F\u002Frebrand.ly\u002F6390b8\">\u003Cimg width=\"300\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F26390946\u002F155666045-aa93bf48-f8e7-407c-bb19-bc247d9e12bd.png\"\u002F>\u003C\u002Fa> | \u003Cimg width=\"300\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F26390946\u002F155599527-fe934f2c-5124-4754-bbf6-bb97d55a77c0.gif\"\u002F> | \u003Cimg width=\"300\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F26390946\u002F155599870-03387689-7be2-4a30-8e6f-90136a0515be.gif\"\u002F> |\n\n| Rounded Filled | With Bottom Cursor | Filled |\n| - | - | - |\n| \u003Cimg width=\"300\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F26390946\u002F155600099-d0a02f55-09e6-4142-92de-066cd71cf211.gif\"\u002F> | \u003Cimg width=\"300\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F26390946\u002F155600276-0380b3b4-3d9c-4ea8-87d0-4f7ebd86e460.gif\"\u002F> | \u003Cimg width=\"300\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F26390946\u002F155600427-901c1eae-e565-4cf8-a338-8ac40eb1149c.gif\"\u002F> |\n\n## Getting Started\n\nThe pin has 6 states `default` `focused`, `submitted`, `following`, `disabled`, `error`, you can customize each state by specifying theme parameter.\nPin smoothly animates from one state to another automatically.\n`PinTheme Class`\n\n\n| Property    |    Default\u002FType    |\n|-------------|:------------------:|\n| width       |        56.0        |\n| height      |        60.0        |\n| textStyle   |    TextStyle()     |\n| margin      | EdgeInsetsGeometry |\n| padding     | EdgeInsetsGeometry |\n| constraints |   BoxConstraints   |\n\nYou can use standard Pinput like so\n\n```dart\nWidget buildPinPut() {\n  return Pinput(\n    onCompleted: (pin) => print(pin),\n  );\n}\n```\n\nIf you want to customize it, create `defaultPinTheme` first.\n\n```dart\nfinal defaultPinTheme = PinTheme(\n  width: 56,\n  height: 56,\n  textStyle: TextStyle(fontSize: 20, color: Color.fromRGBO(30, 60, 87, 1), fontWeight: FontWeight.w600),\n  decoration: BoxDecoration(\n    border: Border.all(color: Color.fromRGBO(234, 239, 243, 1)),\n    borderRadius: BorderRadius.circular(20),\n  ),\n);\n```\n\nif you want all pins to be the same don't pass other theme parameters,\nIf not, create `focusedPinTheme`, `submittedPinTheme`, `followingPinTheme`, `errorPinTheme` from `defaultPinTheme`\n\n```dart\nfinal focusedPinTheme = defaultPinTheme.copyDecorationWith(\n  border: Border.all(color: Color.fromRGBO(114, 178, 238, 1)),\n  borderRadius: BorderRadius.circular(8),\n);\n\nfinal submittedPinTheme = defaultPinTheme.copyWith(\n  decoration: defaultPinTheme.decoration.copyWith(\n    color: Color.fromRGBO(234, 239, 243, 1),\n  ),\n);\n```\n\nPut everything together\n\n```dart\nfinal defaultPinTheme = PinTheme(\n  width: 56,\n  height: 56,\n  textStyle: TextStyle(fontSize: 20, color: Color.fromRGBO(30, 60, 87, 1), fontWeight: FontWeight.w600),\n  decoration: BoxDecoration(\n    border: Border.all(color: Color.fromRGBO(234, 239, 243, 1)),\n    borderRadius: BorderRadius.circular(20),\n  ),\n);\n\nfinal focusedPinTheme = defaultPinTheme.copyDecorationWith(\n  border: Border.all(color: Color.fromRGBO(114, 178, 238, 1)),\n  borderRadius: BorderRadius.circular(8),\n);\n\nfinal submittedPinTheme = defaultPinTheme.copyWith(\n  decoration: defaultPinTheme.decoration.copyWith(\n    color: Color.fromRGBO(234, 239, 243, 1),\n  ),\n);\n\nreturn Pinput(\ndefaultPinTheme: defaultPinTheme,\nfocusedPinTheme: focusedPinTheme,\nsubmittedPinTheme: submittedPinTheme,\nvalidator: (s) {\nreturn s == '2222' ? null : 'Pin is incorrect';\n},\npinputAutovalidateMode: PinputAutovalidateMode.onSubmit,\nshowCursor: true,\nonCompleted: (pin) => print(pin),\n);\n```\n\n## SMS Autofill\n\n### iOS\n\nWorks out of the box, by tapping the code on top of the keyboard\n\n### Android\n\nIf you are using [firebase_auth](https:\u002F\u002Ffirebase.flutter.dev\u002Fdocs\u002Fauth\u002Fphone#verificationcompleted) you have to set `controller'`s value in `verificationCompleted` callback, here is an example code:\n``` dart\n    Pinput(\n      controller: pinController,\n    );\n```\nAnd set pinController's value in `verificationCompleted` callback:\n``` dart\n    await FirebaseAuth.instance.verifyPhoneNumber(\n      verificationCompleted: (PhoneAuthCredential credential) {\n        pinController.setText(credential.smsCode);\n      },\n      verificationFailed: (FirebaseAuthException e) {},\n      codeSent: (String verificationId, int? resendToken) {},\n      codeAutoRetrievalTimeout: (String verificationId) {},\n    );\n```\n---\nIf you aren't using firebase_auth, you have two options, [SMS Retriever API](https:\u002F\u002Fdevelopers.google.com\u002Fidentity\u002Fsms-retriever\u002Foverview?hl=en) and [SMS User Consent API](https:\u002F\u002Fdevelopers.google.com\u002Fidentity\u002Fsms-retriever\u002Fuser-consent\u002Foverview),\n\n[SmartAuth](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fsmart_auth) is a wrapper package for Flutter for these APIs, so go ahead and add it as a dependency.\n\n###### SMS Retriever API\n\nTo use Retriever API you need the App signature - [guide](https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F53849023\u002Fandroid-sms-retriever-api-computing-apps-hash-string-problem)\n\n`Note that The App Signature might be different for debug and release mode`\n\nOnce you get the app signature, you should include it in the SMS message in you backend like so:\n\nSMS example:\n```\nYour ExampleApp code is: 123456\nkg+TZ3A5qzS\n```\n[Example Code](\u002Fexample\u002Flib\u002Fdemo\u002Fsms_retriever_api_example.dart)\n\nSms code will be automatically applied, without user interaction.\n\n###### SMS User Consent API\n\nYou don't need the App signature, the user will be prompted to confirm reading the message\n[Example Code](\u002Fexample\u002Flib\u002Fdemo\u002Fuser_consent_api_example.dart)\n\n\n\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F26390946\u002F158870589-a2d631fa-55d7-487f-8c30-d378bab4c21d.png\" style=\"height: 700px; width: auto; image-rendering: pixelated;\" alt=\"Request Hint\" \u002F>\n\n## See Example app for more [templates](https:\u002F\u002Fgithub.com\u002FTkko\u002FFlutter_PinPut\u002Ftree\u002Fmaster\u002Fexample\u002Flib)\n\n## Tips\n\n- #### Controller\n\n```dart\n\u002F\u002F\u002F Create Controller  \nfinal pinController = TextEditingController();\n\n\u002F\u002F\u002F Set text programmatically  \npinController.setText('1222');\n\n\u002F\u002F\u002F Append typed character, useful if you are using custom keyboard  \npinController.append('1', 4);\n\n\u002F\u002F\u002F Delete last character  \npinController.delete();\n\n\u002F\u002F\u002F Don't call setText, append, delete in build method, this is just illustration.  \n\nreturn Pinput(\n  controller: pinController,  \n);  \n```\n\n- #### Focus\n\n```dart\n\u002F\u002F\u002F Create FocusNode  \nfinal pinputFocusNode = FocusNode();\n\n\u002F\u002F\u002F Focus pinput  \npinputFocusNode.requestFocus();\n\n\u002F\u002F\u002F UnFocus pinput  \npinputFocusNode.unfocus();\n\n\u002F\u002F\u002F Don't call requestFocus, unfocus in build method, this is just illustration.  \n\nreturn Pinput(\n  focusNode: pinputFocusNode,\n);  \n```\n\n- #### Validation\n\n```dart\n\u002F\u002F\u002F Create key\nfinal formKey = GlobalKey\u003CFormState>();\n\n\u002F\u002F\u002F Validate manually\n\u002F\u002F\u002F Don't call validate in build method, this is just illustration.\nformKey.currentState!.validate();\n\nreturn Form(\n  key: formKey,\n  child: Pinput(\n  \u002F\u002F Without Validator\n  \u002F\u002F If true error state will be applied no matter what validator returns\n  forceErrorState: true,\n  \u002F\u002F Text will be displayed under the Pinput\n  errorText: 'Error',\n\n  \u002F\u002F\u002F ------------\n  \u002F\u002F\u002F With Validator\n  \u002F\u002F\u002F Auto validate after user tap on keyboard done button, or completes Pinput\n  pinputAutovalidateMode: PinputAutovalidateMode.onSubmit,\n  validator: (pin) {\n    if (pin == '2224') return null;\n\n    \u002F\u002F\u002F Text will be displayed under the Pinput\n    return 'Pin is incorrect';\n    },\n  ),\n);\n```\n\n## FAQ\n\n#### autofill isn't working on iOS?\n\n- Make sure you are using real device, not simulator\n- Temporary replace Pinput with TextField, and check if autofill works. If, not it's probably a\n  problem with SMS you are getting, autofill doesn't work with most of the languages\n- If you are using non stable version of Flutter that might be cause because something might be\n  broken inside the Framework\n\n#### are you using firebase_auth?\n\nYou should set `controller'`s value in `verificationCompleted` callback, here is an example code:\n``` dart\n    Pinput(\n      controller: pinController,\n    );\n    \n    await FirebaseAuth.instance.verifyPhoneNumber(\n      verificationCompleted: (PhoneAuthCredential credential) {\n        pinController.setText(credential.smsCode);\n      },\n      verificationFailed: (FirebaseAuthException e) {},\n      codeSent: (String verificationId, int? resendToken) {},\n      codeAutoRetrievalTimeout: (String verificationId) {},\n    );\n```\n","Flutter Pinput 是一个用于创建可高度自定义的 Pin 码输入框的 Flutter 包。它支持多种功能，包括动画装饰切换、表单验证、iOS 和 Android 的 SMS 自动填充、自定义光标及动画、从剪贴板复制等。此外，Pinput 还提供了丰富的示例供开发者参考选择。该项目适合需要在应用中实现安全验证（如手机验证码输入）或任何需要用户输入固定长度数字密码的场景。",2,"2026-06-11 03:23:25","top_language"]