CINXE.COM
pin_code_fields | Flutter package
<!DOCTYPE html> <html lang="en-us"><head><script src="https://www.googletagmanager.com/gtm.js?id=GTM-MX6DBN9" async="async"></script><script src="/static/hash-o6oemknr/js/gtm.js" async="async"></script><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@dart_lang"/><meta name="twitter:description" content="A flutter package which will help you to generate pin code fields. Can be useful for OTP for example."/><meta name="twitter:image" content="https://pub.dev/static/hash-o6oemknr/img/pub-dev-icon-cover-image.png"/><meta property="og:type" content="website"/><meta property="og:site_name" content="Dart packages"/><meta property="og:title" content="pin_code_fields | Flutter package"/><meta property="og:description" content="A flutter package which will help you to generate pin code fields. Can be useful for OTP for example."/><meta property="og:image" content="https://pub.dev/static/hash-o6oemknr/img/pub-dev-icon-cover-image.png"/><meta property="og:url" content="https://pub.dev/packages/pin_code_fields"/><title>pin_code_fields | Flutter package</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Display:wght@400&family=Google+Sans+Text:wght@400;500;700&family=Google+Sans+Mono:wght@400;700&display=swap"/><link rel="shortcut icon" href="/static/hash-o6oemknr/img/flutter-logo-32x32.png"/><link rel="stylesheet" href="https://www.gstatic.com/glue/v25_0/ccb.min.css"/><link rel="search" type="application/opensearchdescription+xml" title="Dart packages" href="/osd.xml"/><link rel="canonical" href="https://pub.dev/packages/pin_code_fields"/><meta name="description" content="A flutter package which will help you to generate pin code fields. Can be useful for OTP for example."/><link rel="alternate" type="application/atom+xml" title="Updated Packages Feed for Pub" href="/feed.atom"/><link rel="stylesheet" type="text/css" href="/static/hash-o6oemknr/material/bundle/styles.css"/><link rel="stylesheet" type="text/css" href="/static/hash-o6oemknr/css/style.css"/><script src="/static/hash-o6oemknr/material/bundle/script.min.js" defer="defer"></script><script src="/static/hash-o6oemknr/js/script.dart.js" defer="defer"></script><script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script><meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJwaW5fY29kZV9maWVsZHMiLCJ2ZXJzaW9uIjoiOC4wLjEiLCJsaWtlcyI6MjIyMywicHVibGlzaGVySWQiOiJ0aGVhZGFyLnh5eiIsImlzRGlzY29udGludWVkIjpmYWxzZSwiaXNMYXRlc3QiOnRydWV9LCJzZXNzaW9uQXdhcmUiOmZhbHNlfQ=="/><link rel="preload" href="/static/hash-o6oemknr/highlight/highlight-with-init.js" as="script"/></head><body class="light-theme"><script src="/static/hash-o6oemknr/js/dark-init.js"></script><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div class="site-header"><button class="hamburger" aria-label="menu toggle"></button><a class="logo" href="/"><img class="site-logo" src="/static/hash-o6oemknr/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/></a><div class="site-header-space"></div><div class="site-header-mask"></div><div class="site-header-search"><form action="/packages" method="GET"><input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/></form></div><nav class="site-header-nav scroll-container"><div class="nav-login-container"><button id="-account-login" class="nav-main-button link">Sign in</button></div><div class="nav-container nav-help-container hoverable"><button class="nav-main-button">Help</button><div class="nav-hover-popup"><div class="nav-table-columns"><div class="nav-table-column"><h3>Pub.dev</h3><a class="nav-link" href="/help/search" rel="noopener" target="_blank">Searching for packages</a><a class="nav-link" href="/help/scoring" rel="noopener" target="_blank">Package scoring and pub points</a></div><div class="nav-table-column"><h3>Flutter</h3><a class="nav-link" href="https://flutter.dev/using-packages/" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://flutter.dev/developing-packages/" rel="noopener" target="_blank">Developing packages and plugins</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div><div class="nav-table-column"><h3>Dart</h3><a class="nav-link" href="https://dart.dev/guides/packages" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Pub.dev <img class="foldable-icon" src="/static/hash-o6oemknr/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="/help/search" rel="noopener" target="_blank">Searching for packages</a><a class="nav-link" href="/help/scoring" rel="noopener" target="_blank">Package scoring and pub points</a></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Flutter <img class="foldable-icon" src="/static/hash-o6oemknr/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="https://flutter.dev/using-packages/" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://flutter.dev/developing-packages/" rel="noopener" target="_blank">Developing packages and plugins</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Dart <img class="foldable-icon" src="/static/hash-o6oemknr/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="https://dart.dev/guides/packages" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div></nav></div><div id="banner-container"></div><main class="container"><div class="detail-wrapper -active -has-info-box"><div class="detail-header -is-loose"><div class="detail-container"><div class="detail-header-outer-block"><div class="detail-header-content-block"><h1 class="title">pin_code_fields 8.0.1 <span class="pkg-page-title-copy"><img class="pkg-page-title-copy-icon filter-invert-on-dark" src="/static/hash-o6oemknr/img/content-copy-icon.svg" alt="copy "pin_code_fields: ^8.0.1" to clipboard" width="18" height="18" title="Copy "pin_code_fields: ^8.0.1" to clipboard" data-copy-content="pin_code_fields: ^8.0.1" data-ga-click-event="copy-package-version"/><div class="pkg-page-title-copy-feedback"><span class="code">pin_code_fields: ^8.0.1</span> copied to clipboard</div></span></h1><div class="metadata">Published <span><a class="-x-ago" href="" title="Jun 24, 2023" aria-label="17 months ago" aria-role="button" role="button" data-timestamp="1687599796690">17 months ago</a></span> • <a class="-pub-publisher" href="/publishers/theadar.xyz"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-o6oemknr/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>theadar.xyz</a><span class="package-badge" title="Package is compatible with Dart 3.">Dart 3 compatible</span></div><div class="detail-tags-and-like"><div class="detail-tags"><div class="-pub-tag-badge"><span class="tag-badge-main">SDK</span><a class="tag-badge-sub" href="/packages?q=sdk%3Aflutter" rel="nofollow" title="Packages compatible with Flutter SDK">Flutter</a></div><div class="-pub-tag-badge"><span class="tag-badge-main">Platform</span><a class="tag-badge-sub" href="/packages?q=platform%3Aandroid" rel="nofollow" title="Packages compatible with Android platform">Android</a><a class="tag-badge-sub" href="/packages?q=platform%3Aios" rel="nofollow" title="Packages compatible with iOS platform">iOS</a><a class="tag-badge-sub" href="/packages?q=platform%3Alinux" rel="nofollow" title="Packages compatible with Linux platform">Linux</a><a class="tag-badge-sub" href="/packages?q=platform%3Amacos" rel="nofollow" title="Packages compatible with macOS platform">macOS</a><a class="tag-badge-sub" href="/packages?q=platform%3Aweb" rel="nofollow" title="Packages compatible with Web platform">web</a><a class="tag-badge-sub" href="/packages?q=platform%3Awindows" rel="nofollow" title="Packages compatible with Windows platform">Windows</a></div></div><div class="detail-like"><button id="-pub-like-icon-button" class="mdc-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package"><img class="mdc-icon-button__icon" src="/static/hash-o6oemknr/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/><img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-o6oemknr/img/like-active.svg" alt="liked status: active" width="18" height="18"/></button><span class="likes-count"><span id="likes-count">2.2k</span></span></div></div></div></div></div></div><div class="detail-container"><div class="detail-lead"><div class="detail-metadata-toggle"><div class="detail-metadata-toggle-icon">→</div><h3 class="detail-lead-title">Metadata</h3></div><p class="detail-lead-text">A flutter package which will help you to generate pin code fields. Can be useful for OTP for example.</p><p class="detail-lead-more"><a class="detail-metadata-toggle">More...</a></p></div></div><div class="detail-body"><div class="detail-tabs"><div class="detail-tabs-wide-header"><div class="detail-container"><ul class="detail-tabs-header"><li class="detail-tab tab-button detail-tab-readme-title -active">Readme</li><li class="detail-tab tab-link detail-tab-changelog-title"><a href="/packages/pin_code_fields/changelog" role="button">Changelog</a></li><li class="detail-tab tab-link detail-tab-example-title"><a href="/packages/pin_code_fields/example" role="button">Example</a></li><li class="detail-tab tab-link detail-tab-installing-title"><a href="/packages/pin_code_fields/install" role="button">Installing</a></li><li class="detail-tab tab-link detail-tab-versions-title"><a href="/packages/pin_code_fields/versions" role="button">Versions</a></li><li class="detail-tab tab-link detail-tab-analysis-title"><a href="/packages/pin_code_fields/score" role="button">Scores</a></li></ul></div></div><div class="detail-container detail-body-main"><div class="detail-tabs-content"><section class="tab-content detail-tab-readme-content -active markdown-body"><p align="center"> <img width="460" src="https://i.ibb.co/X5qxF7x/export-banner.png"> </p> <p><a href="https://pub.dev/packages/pin_code_fields"><img src="https://img.shields.io/pub/v/pin_code_fields"></a></p> <p><a href="https://www.patreon.com/bePatron?u=26622525" rel="ugc"><img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="250"></a></p> <p>A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓</p> <h2 class="hash-header" id="features-">Features 💚 <a href="#features-" class="hash-link">#</a></h2> <ul> <li>Automatically focuses the next field on typing and focuses previous field on deletation</li> <li>Cursor support ⚡️</li> <li>Can be set to any length. (3-6 fields recommended)</li> <li>3 different shapes for text fields</li> <li>Highly customizable</li> <li>3 different types of animation for input texts</li> <li>Animated active, inactive, selected and disabled field color switching</li> <li>Autofocus option</li> <li>Otp-code pasting from clipboard</li> <li>iOS autofill support</li> <li>Error animation. Currently have shake animation only. Watch the example app for how to integrate.</li> <li>Works with Flutter's Form. You can use Form validator right off the bat.</li> <li>Get currently typed text and use your condition to validate it. (for example: if (currentText.length != 6 || currentText != "your desired code"))</li> <li>Haptic Feedback support</li> <li>Animated obscure widget support</li> <li>Single placeholder text</li> </ul> <h2 class="hash-header" id="getting-started-">Getting Started ⚡️ <a href="#getting-started-" class="hash-link">#</a></h2> <h4 id="demo">Demo</h4> <p><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/example.gif" width="320" height="480"> <img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/paste_android.gif" width="240" height="480"> <img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/paste_ios.gif" width="240" height="480"></p> <h4 id="different-shapes">Different Shapes</h4> <p><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/box.png" width="250" height="480"><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/circle.png" width="250" height="480"><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/underline.png" width="250" height="480"></p> <h2 class="hash-header" id="notes">Notes <a href="#notes" class="hash-link">#</a></h2> <ul> <li>To enable "Fill color" for each cells, <code>enableActiveFill</code> must be set to <code>true</code>. The default value is <code>false</code>.</li> <li>To change the keyboard type, for example to use only number keyboard, or only for email use <code>keyboardType</code> parameter, default is [TextInputType.visiblePassword]</li> <li><code>FocosNode</code> and <code>TextEditingController</code> will get disposed automatically. Use <code>autoDisposeControllers = false</code> to disable it.</li> <li>to use v5.0.0 or above, developers must have Flutter SDK 1.20.0 or above.</li> <li>to use v6.0.0 or above, developers must have Flutter SDK 1.22.0 or above.</li> </ul> <h2 class="hash-header" id="properties-">Properties 🔖 <a href="#properties-" class="hash-link">#</a></h2> <pre><code class="language-Dart"> /// The [BuildContext] of the application final BuildContext appContext; ///Box Shadow for Pincode final List<BoxShadow>? boxShadows; /// length of how many cells there should be. 3-8 is recommended by me final int length; /// you already know what it does i guess :P default is false final bool obscureText; /// Character used for obscuring text if obscureText is true. /// /// Must not be empty. Single character is recommended. /// /// Default is ● - 'Black Circle' (U+25CF) final String obscuringCharacter; /// Widget used to obscure text /// /// it overrides the obscuringCharacter final Widget? obscuringWidget; /// Whether to use haptic feedback or not /// /// final bool useHapticFeedback; /// Haptic Feedback Types /// /// heavy, medium, light links to respective impacts /// selection - selectionClick, vibrate - vibrate /// check [HapticFeedback] for more final HapticFeedbackTypes hapticFeedbackTypes; /// Decides whether typed character should be /// briefly shown before being obscured final bool blinkWhenObscuring; /// Blink Duration if blinkWhenObscuring is set to true final Duration blinkDuration; /// returns the current typed text in the fields final ValueChanged<String> onChanged; /// returns the typed text when all pins are set final ValueChanged<String>? onCompleted; /// returns the typed text when user presses done/next action on the keyboard final ValueChanged<String>? onSubmitted; /// the style of the text, default is [ fontSize: 20, fontWeight: FontWeight.bold] final TextStyle? textStyle; /// the style of the pasted text, default is [fontWeight: FontWeight.bold] while /// [TextStyle.color] is [ThemeData.colorScheme.onSecondary] final TextStyle? pastedTextStyle; /// background color for the whole row of pin code fields. final Color? backgroundColor; /// This defines how the elements in the pin code field align. Default to [MainAxisAlignment.spaceBetween] final MainAxisAlignment mainAxisAlignment; /// [AnimationType] for the text to appear in the pin code field. Default is [AnimationType.slide] final AnimationType animationType; /// Duration for the animation. Default is [Duration(milliseconds: 150)] final Duration animationDuration; /// [Curve] for the animation. Default is [Curves.easeInOut] final Curve animationCurve; /// [TextInputType] for the pin code fields. default is [TextInputType.visiblePassword] final TextInputType keyboardType; /// If the pin code field should be autofocused or not. Default is [false] final bool autoFocus; /// Should pass a [FocusNode] to manage it from the parent final FocusNode? focusNode; /// A list of [TextInputFormatter] that goes to the TextField final List<TextInputFormatter> inputFormatters; /// Enable or disable the Field. Default is [true] final bool enabled; /// [TextEditingController] to control the text manually. Sets a default [TextEditingController()] object if none given final TextEditingController? controller; /// Enabled Color fill for individual pin fields, default is [false] final bool enableActiveFill; /// Auto dismiss the keyboard upon inputting the value for the last field. Default is [true] final bool autoDismissKeyboard; /// Auto dispose the [controller] and [FocusNode] upon the destruction of widget from the widget tree. Default is [true] final bool autoDisposeControllers; /// Configures how the platform keyboard will select an uppercase or lowercase keyboard. /// Only supports text keyboards, other keyboard types will ignore this configuration. Capitalization is locale-aware. /// - Copied from 'https://api.flutter.dev/flutter/services/TextCapitalization-class.html' /// Default is [TextCapitalization.none] final TextCapitalization textCapitalization; final TextInputAction textInputAction; /// Triggers the error animation final StreamController<ErrorAnimationType>? errorAnimationController; /// Callback method to validate if text can be pasted. This is helpful when we need to validate text before pasting. /// e.g. validate if text is number. Default will be pasted as received. final bool Function(String? text)? beforeTextPaste; /// Method for detecting a pin_code form tap /// work with all form windows final Function? onTap; /// Configuration for paste dialog. Read more [DialogConfig] final DialogConfig? dialogConfig; /// Theme for the pin cells. Read more [PinTheme] final PinTheme pinTheme; /// Brightness dark or light choices for iOS keyboard. final Brightness? keyboardAppearance; /// Validator for the [TextFormField] final FormFieldValidator<String>? validator; /// An optional method to call with the final value when the form is saved via /// [FormState.save]. final FormFieldSetter<String>? onSaved; /// enables auto validation for the [TextFormField] /// Default is [AutovalidateMode.onUserInteraction] final AutovalidateMode autovalidateMode; /// The vertical padding from the [PinCodeTextField] to the error text /// Default is 16. final double errorTextSpace; /// Margin for the error text /// Default is [EdgeInsets.zero]. final EdgeInsets errorTextMargin; /// [TextDirection] to control a direction in which text flows. /// Default is [TextDirection.ltr] final TextDirection errorTextDirection; /// Enables pin autofill for TextFormField. /// Default is true final bool enablePinAutofill; /// Error animation duration final int errorAnimationDuration; /// Whether to show cursor or not final bool showCursor; /// The color of the cursor, default to Theme.of(context).accentColor final Color? cursorColor; /// width of the cursor, default to 2 final double cursorWidth; /// Height of the cursor, default to FontSize + 8; final double? cursorHeight; /// Autofill cleanup action final AutofillContextAction onAutoFillDisposeAction; /// Use external [AutoFillGroup] final bool useExternalAutoFillGroup; /// Displays a hint or placeholder in the field if it's value is empty. /// It only appears if it's not null. Single character is recommended. final String? hintCharacter; /// the style of the [hintCharacter], default is [fontSize: 20, fontWeight: FontWeight.bold] /// and it also uses the [textStyle]'s properties /// [TextStyle.color] is [Colors.grey] final TextStyle? hintStyle; /// ScrollPadding follows the same property as TextField's ScrollPadding, default to /// const EdgeInsets.all(20), final EdgeInsets scrollPadding; /// Text gradient for Pincode final Gradient? textGradient; /// Makes the pin cells readOnly final bool readOnly; /// Enable auto unfocus final bool autoUnfocus; /// Builds separator children final IndexedWidgetBuilder? separatorBuilder; </code></pre> <p><strong>PinTheme</strong></p> <pre><code class="language-Dart">/// Colors of the input fields which have inputs. Default is [Colors.green] final Color activeColor; /// Color of the input field which is currently selected. Default is [Colors.blue] final Color selectedColor; /// Colors of the input fields which don't have inputs. Default is [Colors.red] final Color inactiveColor; /// Colors of the input fields if the [PinCodeTextField] is disabled. Default is [Colors.grey] final Color disabledColor; /// Colors of the input fields which have inputs. Default is [Colors.green] final Color activeFillColor; /// Color of the input field which is currently selected. Default is [Colors.blue] final Color selectedFillColor; /// Colors of the input fields which don't have inputs. Default is [Colors.red] final Color inactiveFillColor; /// Color of the input field when in error mode. Default is [Colors.redAccent] final Color errorBorderColor; /// Border radius of each pin code field final BorderRadius borderRadius; /// [height] for the pin code field. default is [50.0] final double fieldHeight; /// [width] for the pin code field. default is [40.0] final double fieldWidth; /// Border width for the each input fields. Default is [2.0] final double borderWidth; /// this defines the shape of the input fields. Default is underlined final PinCodeFieldShape shape; </code></pre> <p><strong>DialogConfig</strong></p> <pre><code class="language-Dart">/// title of the [AlertDialog] while pasting the code. Default to [Paste Code] final String dialogTitle; /// content of the [AlertDialog] while pasting the code. Default to ["Do you want to paste this code "] final String dialogContent; /// Affirmative action text for the [AlertDialog]. Default to "Paste" final String affirmativeText; /// Negative action text for the [AlertDialog]. Default to "Cancel" final String negativeText; /// The default dialog theme, should it be iOS or other(including web and Android) final Platform platform; //enum Platform { iOS, other } other indicates for web and android </code></pre> <h2 class="hash-header" id="contributors-">Contributors ✨ <a href="#contributors-" class="hash-link">#</a></h2> <p>Thanks to everyone whoever suggested their thoughts to improve this package. And special thanks goes to these people:</p> <table> <tbody><tr> <td align="center"><a href="https://github.com/EmmanuelVlad" rel="ugc"><img src="https://avatars0.githubusercontent.com/u/21370666?v=3" width="100px;" alt="Emmanuel Vlad"><br><sub><b>Emmanuel Vlad</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields" title="Documentation" rel="ugc">📖</a><a href="https://github.com/adar2378/pin_code_fields/commits?author=EmmanuelVlad" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://atiq.info/" rel="ugc"><img src="https://atiq.info/images/logo.png" width="100px;" alt="Atiq"><br><sub><b>Atiqur Rahaman</b></sub></a><br><a href="https://www.2dimensions.com/a/atiq31416/files/flare/otp-verification/preview" title="UX & Flare Animation" rel="ugc">🎨</a></td> <td align="center"><a href="https://github.com/milind-mevada-stl" rel="ugc"><img src="https://avatars2.githubusercontent.com/u/29375516?v=3" width="100px;" alt="Milind Mevada"><br><sub><b>Milind Mevada</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields" title="Documentation" rel="ugc">📖</a><a href="https://github.com/adar2378/pin_code_fields/commits?author=milind-mevada-stl" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/RemeJuan" rel="ugc"><img src="https://avatars1.githubusercontent.com/u/864552?v=3" width="100px;" alt="Reme Le Hane"><br><sub><b>Reme Le Hane</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields" title="Documentation" rel="ugc">📖</a><a href="https://github.com/adar2378/pin_code_fields/commits?author=RemeJuan" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/TabooSun" rel="ugc"><img src="https://avatars2.githubusercontent.com/u/31196825?v=3" width="100px;" alt="TabooSun"><br><sub><b>TabooSun</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=TabooSun" title="Code" rel="ugc">💻<!--<a--></a></td> <td align="center"><a href="https://github.com/thallessantos" rel="ugc"><img src="https://avatars2.githubusercontent.com/u/13054457?v=3" width="100px;" alt="Thalles Santos"><br><sub><b>Thalles Santos</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=thallessantos" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/ItamarMu" rel="ugc"><img src="https://avatars2.githubusercontent.com/u/27651221?v=3" width="100px;" alt="ItamarMu"><br><sub><b>ItamarMu</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=ItamarMu" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/ThinkDigitalSoftware" rel="ugc"><img src="https://avatars3.githubusercontent.com/u/23037821?v=3" width="100px;" alt="Jonathan White"><br><sub><b>ThinkDigitalSoftware</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=ThinkDigitalSoftware" title="Code" rel="ugc">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/JeffryHermanto" rel="ugc"><img src="https://avatars0.githubusercontent.com/u/35820325?v=3" width="100px;" alt="Jeffry Hermanto"><br><sub><b>Jeffry Hermanto</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=JeffryHermanto" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/ItamarMu" rel="ugc"><img src="https://avatars3.githubusercontent.com/u/27651221?v=3" width="100px;" alt="ItamarMu"><br><sub><b>ItamarMu</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=ItamarMu" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/ened" rel="ugc"><img src="https://avatars0.githubusercontent.com/u/269860?v=3" width="100px;" alt="Sebastian Roth"><br><sub><b>Sebastian Roth</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=ened" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/darkang3lz92" rel="ugc"><img src="https://avatars3.githubusercontent.com/u/33158127?v=3" width="100px;" alt="Dango Mango"><br><sub><b>Dango Mango</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=darkang3lz92" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/Frezyx" rel="ugc"><img src="https://avatars1.githubusercontent.com/u/40857927?v=3" width="100px;" alt="Stanislav Ilin"><br><sub><b>Stanislav Ilin</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=Frezyx" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/VarunBarad" rel="ugc"><img src="https://avatars0.githubusercontent.com/u/8678857?v=3" width="100px;" alt="Varun Barad"><br><sub><b>Varun Barad</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=VarunBarad" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/mohak852" rel="ugc"><img src="https://avatars0.githubusercontent.com/u/58987025?v=3" width="100px;" alt="Mohak Shrivastava"><br><sub><b>Mohak Shrivastava</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=mohak852" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/ItamarMu" rel="ugc"><img src="https://avatars0.githubusercontent.com/u/27651221?v=3" width="100px;" alt="ItamarMu"><br><sub><b>ItamarMu</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=ItamarMu" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/Margarets00" rel="ugc"><img src="https://avatars0.githubusercontent.com/u/39041161?v=3" width="100px;" alt="Kim Minju"><br><sub><b>Kim Minju</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=Margarets00" title="Code" rel="ugc">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/JSBmanD" rel="ugc"><img src="https://avatars3.githubusercontent.com/u/5402335?s=400&v=4" width="100px;" alt="Dmitry Vakhnin"><br><sub><b>Dmitry Vakhnin</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=JSBmanD" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/serendipity1004" rel="ugc"><img src="https://avatars3.githubusercontent.com/u/20388249?s=400" width="100px;" alt="serendipity1004"><br><sub><b>Jiho Choi</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=serendipity1004" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/jobfeikens" rel="ugc"><img src="https://avatars.githubusercontent.com/u/25356841?s=400&u=3f23a86b454b541fbcd88c9ed4a5f36df914dd03&v=4" width="100px;" alt="jobfeikens"><br><sub><b>Job</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=jobfeikens" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/BrunoEleodoro" rel="ugc"><img src="https://avatars2.githubusercontent.com/u/20596317?s=400" width="100px;" alt="BrunoEleodoro"><br><sub><b>Bruno Eleodoro Roza</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=BrunoEleodoro" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/tgbarker" rel="ugc"><img src="https://avatars.githubusercontent.com/u/2621350?s=400&v=4" width="100px;" alt="tgbarker"><br><sub><b>tgbarker</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=tgbarker" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/karabanovbs" rel="ugc"><img src="https://avatars.githubusercontent.com/u/14288495?s=400&v=4" width="100px;" alt="karabanovbs"><br><sub><b>karabanovbs</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=karabanovbs" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/adarsh-technocrat" rel="ugc"><img src="https://avatars.githubusercontent.com/u/14288495?s=400&v=4" width="100px;" alt="adarsh-technocrat"><br><sub><b>Adarsh kumar singh</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=adarsh-technocrat" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/adrianFarkas" rel="ugc"><img src="https://avatars.githubusercontent.com/u/45693911?v=4" width="100px;" alt="adrianFarkas"><br><sub><b>Farkas Adrián</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=adrianFarkas" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/grafovdenis" rel="ugc"><img src="https://avatars.githubusercontent.com/u/20505376?v=4" width="100px;" alt="grafovdenis"><br><sub><b>Denis Grafov</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=grafovdenis" title="Code" rel="ugc">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/ItzNotABug" rel="ugc"><img src="https://avatars.githubusercontent.com/u/20625965?v=4" width="100px;" alt="ItzNotABug"><br><sub><b>DarShan</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=ItzNotABug" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/dhruvanbhalara" rel="ugc"><img src="https://avatars.githubusercontent.com/u/53393418?v=4" width="100px;" alt="dhruvanbhalara"><br><sub><b>Dhruvan Bhalara</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=dhruvanbhalara" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/rodion-m" rel="ugc"><img src="https://avatars.githubusercontent.com/u/36400912?v=4" width="100px;" alt="rodion-m"><br><sub><b>Rodion Mostovoy</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=rodion-m" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/nerotyc" rel="ugc"><img src="https://avatars.githubusercontent.com/u/25231329?v=4" width="100px;" alt="nerotyc"><br><sub><b>Robin Holzinger</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=nerotyc" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/Graaggas" rel="ugc"><img src="https://avatars.githubusercontent.com/u/24309240?v=4" width="100px;" alt="Graaggas"><br><sub><b>Deyew Vladimir</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=Graaggas" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/Add00w" rel="ugc"><img src="https://avatars.githubusercontent.com/u/35359329?v=4" width="100px;" alt="Add00w"><br><sub><b>Abdullahi A. Addow</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=Add00w" title="Code" rel="ugc">💻</a></td> <td align="center"><a href="https://github.com/vlkonoshenko" rel="ugc"><img src="https://avatars.githubusercontent.com/u/15077780?v=4" width="100px;" alt="vlkonoshenko"><br><sub><b>Konoshenko Vlad</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=vlkonoshenko" title="Code" rel="ugc">💻</a></td> </tr> </tbody></table> <p><strong>The pin code text field widget example</strong></p> <pre><code class="language-Dart">PinCodeTextField( length: 6, obscureText: false, animationType: AnimationType.fade, pinTheme: PinTheme( shape: PinCodeFieldShape.box, borderRadius: BorderRadius.circular(5), fieldHeight: 50, fieldWidth: 40, activeFillColor: Colors.white, ), animationDuration: Duration(milliseconds: 300), backgroundColor: Colors.blue.shade50, enableActiveFill: true, errorAnimationController: errorController, controller: textEditingController, onCompleted: (v) { print("Completed"); }, onChanged: (value) { print(value); setState(() { currentText = value; }); }, beforeTextPaste: (text) { print("Allowing to paste $text"); //if you return true then it will show the paste confirmation dialog. Otherwise if false, then nothing will happen. //but you can show anything you want here, like your pop up saying wrong paste format or etc return true; }, ) </code></pre> <p><strong>Shape can be among these 3 types</strong></p> <pre><code class="language-Dart">enum PinCodeFieldShape { box, underline, circle } </code></pre> <p><strong>Animations can be among these 3 types</strong></p> <pre><code class="language-Dart">enum AnimationType { scale, slide, fade, none } </code></pre> <p><strong>Haptic Feedbacks can be among these 5 types</strong></p> <pre><code class="language-Dart">enum HapticFeedbackTypes { heavy, light, medium, selection, vibrate, } </code></pre> <p><strong>Trigger Error animation</strong><br></p> <ol> <li>Create a StreamController</li> </ol> <pre><code class="language-Dart">StreamController<ErrorAnimationType> errorController = StreamController<ErrorAnimationType>(); </code></pre> <ol start="2"> <li>And pass the controller like this.</li> </ol> <pre><code class="language-Dart">PinCodeTextField( length: 6, obscureText: false, animationType: AnimationType.fade, animationDuration: Duration(milliseconds: 300), errorAnimationController: errorController, // Pass it here onChanged: (value) { setState(() { currentText = value; }); }, ) </code></pre> <ol start="3"> <li>Then you can trigger the animation just by writing this:</li> </ol> <pre><code class="language-Dart">errorController.add(ErrorAnimationType.shake); // This will shake the pin code field </code></pre> <p><strong>This full code is from the example folder. You can run the example to see.</strong></p> <pre><code class="language-Dart">class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: PinCodeVerificationScreen( "+8801376221100"), // a random number, please don't call xD ); } } class PinCodeVerificationScreen extends StatefulWidget { final String phoneNumber; PinCodeVerificationScreen(this.phoneNumber); @override _PinCodeVerificationScreenState createState() => _PinCodeVerificationScreenState(); } class _PinCodeVerificationScreenState extends State<PinCodeVerificationScreen> { var onTapRecognizer; TextEditingController textEditingController = TextEditingController(); // ..text = "123456"; StreamController<ErrorAnimationType> errorController; bool hasError = false; String currentText = ""; final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>(); final formKey = GlobalKey<FormState>(); @override void initState() { onTapRecognizer = TapGestureRecognizer() ..onTap = () { Navigator.pop(context); }; errorController = StreamController<ErrorAnimationType>(); super.initState(); } @override void dispose() { errorController.close(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.blue.shade50, key: scaffoldKey, body: GestureDetector( onTap: () {}, child: Container( height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, child: ListView( children: <Widget>[ SizedBox(height: 30), Container( height: MediaQuery.of(context).size.height / 3, child: FlareActor( "assets/otp.flr", animation: "otp", fit: BoxFit.fitHeight, alignment: Alignment.center, ), ), SizedBox(height: 8), Padding( padding: const EdgeInsets.symmetric(vertical: 8.0), child: Text( 'Phone Number Verification', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22), textAlign: TextAlign.center, ), ), Padding( padding: const EdgeInsets.symmetric(horizontal: 30.0, vertical: 8), child: RichText( text: TextSpan( text: "Enter the code sent to ", children: [ TextSpan( text: widget.phoneNumber, style: TextStyle( color: Colors.black, fontWeight: FontWeight.bold, fontSize: 15)), ], style: TextStyle(color: Colors.black54, fontSize: 15)), textAlign: TextAlign.center, ), ), SizedBox( height: 20, ), Form( key: formKey, child: Padding( padding: const EdgeInsets.symmetric( vertical: 8.0, horizontal: 30), child: PinCodeTextField( appContext: context, pastedTextStyle: TextStyle( color: Colors.green.shade600, fontWeight: FontWeight.bold, ), length: 6, obscureText: false, obscuringCharacter: '*', animationType: AnimationType.fade, validator: (v) { if (v.length < 3) { return "I'm from validator"; } else { return null; } }, pinTheme: PinTheme( shape: PinCodeFieldShape.box, borderRadius: BorderRadius.circular(5), fieldHeight: 60, fieldWidth: 50, activeFillColor: hasError ? Colors.orange : Colors.white, ), cursorColor: Colors.black, animationDuration: Duration(milliseconds: 300), textStyle: TextStyle(fontSize: 20, height: 1.6), backgroundColor: Colors.blue.shade50, enableActiveFill: true, errorAnimationController: errorController, controller: textEditingController, keyboardType: TextInputType.number, boxShadows: [ BoxShadow( offset: Offset(0, 1), color: Colors.black12, blurRadius: 10, ) ], onCompleted: (v) { print("Completed"); }, // onTap: () { // print("Pressed"); // }, onChanged: (value) { print(value); setState(() { currentText = value; }); }, beforeTextPaste: (text) { print("Allowing to paste $text"); //if you return true then it will show the paste confirmation dialog. Otherwise if false, then nothing will happen. //but you can show anything you want here, like your pop up saying wrong paste format or etc return true; }, )), ), Padding( padding: const EdgeInsets.symmetric(horizontal: 30.0), child: Text( hasError ? "*Please fill up all the cells properly" : "", style: TextStyle( color: Colors.red, fontSize: 12, fontWeight: FontWeight.w400), ), ), SizedBox( height: 20, ), RichText( textAlign: TextAlign.center, text: TextSpan( text: "Didn't receive the code? ", style: TextStyle(color: Colors.black54, fontSize: 15), children: [ TextSpan( text: " RESEND", recognizer: onTapRecognizer, style: TextStyle( color: Color(0xFF91D3B3), fontWeight: FontWeight.bold, fontSize: 16)) ]), ), SizedBox( height: 14, ), Container( margin: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 30), child: ButtonTheme( height: 50, child: FlatButton( onPressed: () { formKey.currentState.validate(); // conditions for validating if (currentText.length != 6 || currentText != "towtow") { errorController.add(ErrorAnimationType .shake); // Triggering error shake animation setState(() { hasError = true; }); } else { setState(() { hasError = false; scaffoldKey.currentState.showSnackBar(SnackBar( content: Text("Aye!!"), duration: Duration(seconds: 2), )); }); } }, child: Center( child: Text( "VERIFY".toUpperCase(), style: TextStyle( color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold), )), ), ), decoration: BoxDecoration( color: Colors.green.shade300, borderRadius: BorderRadius.circular(5), boxShadow: [ BoxShadow( color: Colors.green.shade200, offset: Offset(1, -2), blurRadius: 5), BoxShadow( color: Colors.green.shade200, offset: Offset(-1, 2), blurRadius: 5) ]), ), SizedBox( height: 16, ), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ FlatButton( child: Text("Clear"), onPressed: () { textEditingController.clear(); }, ), FlatButton( child: Text("Set Text"), onPressed: () { textEditingController.text = "123456"; }, ), ], ) ], ), ), ), ); } } </code></pre> </section></div></div></div><aside class="detail-info-box"><a class="packages-scores" href="/packages/pin_code_fields/score"><div class="packages-score packages-score-like"><div class="packages-score-value -has-value"><span class="packages-score-value-number">2223</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">likes</div></div><div class="packages-score packages-score-health"><div class="packages-score-value -has-value"><span class="packages-score-value-number">140</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">pub points</div></div><div class="packages-score packages-score-popularity"><div class="packages-score-value -has-value"><span class="packages-score-value-number">100</span><span class="packages-score-value-sign">%</span></div><div class="packages-score-label">popularity</div></div></a><h3 class="title">Publisher</h3><p><a href="/publishers/theadar.xyz"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-o6oemknr/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>theadar.xyz</a></p><h3 class="title pkg-infobox-metadata">Metadata</h3><p>A flutter package which will help you to generate pin code fields. Can be useful for OTP for example.</p><p><a class="link" href="https://github.com/adar2378" rel="ugc">Homepage</a><br/><a class="link" href="https://github.com/adar2378/pin_code_fields" rel="ugc">Repository (GitHub)</a><br/><a class="link" href="https://github.com/adar2378/pin_code_fields/issues" rel="ugc">View/report issues</a><br/></p><h3 class="title">Documentation</h3><p><a class="link" href="/documentation/pin_code_fields/latest/">API reference</a><br/></p><h3 class="title">License</h3><p><img class="inline-icon-img filter-invert-on-dark" src="/static/hash-o6oemknr/img/material-icon-balance.svg" alt="" width="14" height="14" role="presentation"/>MIT (<a href="/packages/pin_code_fields/license">license</a>)</p><h3 class="title">Dependencies</h3><p><a href="https://api.flutter.dev/">flutter</a></p><h3 class="title">More</h3><p><a href="/packages?q=dependency%3Apin_code_fields" rel="nofollow">Packages that depend on pin_code_fields</a></p></aside></div><script type="application/ld+json">{"@context":"http\u003a\u002f\u002fschema.org","@type":"SoftwareSourceCode","name":"pin\u005fcode\u005ffields","version":"8.0.1","description":"pin\u005fcode\u005ffields - A flutter package which will help you to generate pin code fields. Can be useful for OTP for example.","url":"https\u003a\u002f\u002fpub.dev\u002fpackages\u002fpin\u005fcode\u005ffields","dateCreated":"2019-07-27T09\u003a33\u003a43.029592Z","dateModified":"2023-06-24T09\u003a43\u003a16.690194Z","programmingLanguage":"Dart","image":"https\u003a\u002f\u002fpub.dev\u002fstatic\u002fimg\u002fpub-dev-icon-cover-image.png","license":"https\u003a\u002f\u002fpub.dev\u002fpackages\u002fpin\u005fcode\u005ffields\u002flicense"}</script></div><div class="detail-metadata"><h3 class="detail-metadata-title"><span class="detail-metadata-toggle">←</span> Metadata</h3><div class="detail-info-box"><a class="packages-scores" href="/packages/pin_code_fields/score"><div class="packages-score packages-score-like"><div class="packages-score-value -has-value"><span class="packages-score-value-number">2223</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">likes</div></div><div class="packages-score packages-score-health"><div class="packages-score-value -has-value"><span class="packages-score-value-number">140</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">pub points</div></div><div class="packages-score packages-score-popularity"><div class="packages-score-value -has-value"><span class="packages-score-value-number">100</span><span class="packages-score-value-sign">%</span></div><div class="packages-score-label">popularity</div></div></a><h3 class="title">Publisher</h3><p><a href="/publishers/theadar.xyz"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-o6oemknr/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>theadar.xyz</a></p><h3 class="title pkg-infobox-metadata">Metadata</h3><p>A flutter package which will help you to generate pin code fields. Can be useful for OTP for example.</p><p><a class="link" href="https://github.com/adar2378" rel="ugc">Homepage</a><br/><a class="link" href="https://github.com/adar2378/pin_code_fields" rel="ugc">Repository (GitHub)</a><br/><a class="link" href="https://github.com/adar2378/pin_code_fields/issues" rel="ugc">View/report issues</a><br/></p><h3 class="title">Documentation</h3><p><a class="link" href="/documentation/pin_code_fields/latest/">API reference</a><br/></p><h3 class="title">License</h3><p><img class="inline-icon-img filter-invert-on-dark" src="/static/hash-o6oemknr/img/material-icon-balance.svg" alt="" width="14" height="14" role="presentation"/>MIT (<a href="/packages/pin_code_fields/license">license</a>)</p><h3 class="title">Dependencies</h3><p><a href="https://api.flutter.dev/">flutter</a></p><h3 class="title">More</h3><p><a href="/packages?q=dependency%3Apin_code_fields" rel="nofollow">Packages that depend on pin_code_fields</a></p></div><p class="detail-lead-back"><a class="detail-metadata-toggle">Back</a></p></div><div id="-screenshot-carousel" class="carousel"><fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0"><div class="mdc-fab__ripple"></div><img class="mdc-fab__icon" src="/static/hash-o6oemknr/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/></fab><div id="-image-container" class="image-container"></div><fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0"><div class="mdc-fab__ripple"></div><img class="mdc-fab__icon" src="/static/hash-o6oemknr/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/></fab><p id="-screenshot-description" class="screenshot-description"></p></div></main><footer class="site-footer"><a class="link" href="https://dart.dev/">Dart language</a><a class="link sep" href="/report?subject=package%3Apin_code_fields&url=https%3A%2F%2Fpub.dev%2Fpackages%2Fpin_code_fields">Report package</a><a class="link sep" href="/policy">Policy</a><a class="link sep" href="https://www.google.com/intl/en/policies/terms/">Terms</a><a class="link sep" href="https://developers.google.com/terms/">API Terms</a><a class="link sep" href="/security">Security</a><a class="link sep" href="https://www.google.com/intl/en/policies/privacy/">Privacy</a><a class="link sep" href="/help">Help</a><a class="link icon sep" href="/feed.atom"><img class="inline-icon" src="/static/hash-o6oemknr/img/rss-feed-icon.svg" alt="RSS" width="20" height="20" title="RSS/atom feed"/></a><a class="link icon github_issue" href="https://github.com/dart-lang/pub-dev/issues/new"><img class="inline-icon" src="/static/hash-o6oemknr/img/bug-report-white-96px.png" alt="bug report" width="20" height="20" title="Report an issue with this site"/></a></footer><script src="/static/hash-o6oemknr/highlight/highlight-with-init.js" defer="defer"></script></body></html>