FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

PinCode

The PinCode widget allows you to enter the PIN or OTP. You could use this widget to verify the user identity or a transaction before making payments in fintech apps.
PinCode widget

Adding PinCode widget

To add a PinCode widget:
  1. 1.
    First, click on the + Add Widget, drag the PinCode widget from the Base Elements tab, or add it directly from the widget tree. This will add the most basic version of the PinCode widget, allowing you to enter up to four values.
  2. 2.
    To increase the pin length (number of values users can enter), move to the properties panel, see the Pin Length property, and enter the value. Note: You can only set this value up to 8.
  3. 3.
    If you are using this widget to get a secret PIN from users, you can obscure it with a special character. To do so, enable the Obscure Text toggle and select the Obscuring Character among the *,-,?, and •.
  4. 4.
    You can also enable/disable the Hint Text toggle and select the Hint Character displayed when you haven't entered anything.
  5. 5.
    By default, this widget is set to Auto Focus, meaning it is ready to receive input from you without having you click on it.
Adding PinCode widget

Trigger action On Completed

Let's see how to trigger an action when you are done entering the value in this widget. This is helpful when you want to compare the entered value with the one stored in your backend.
Displaying a snackbar message with entered value in PinCode widget
To do so:
  1. 1.
    Select the PinCode widget, select Actions from the Properties panel (the right menu), and click + Add Action.
  2. 2.
    Set the Type of Action (aka callback) to On Completed. That means actions added under this will be called after the user has entered all PIN field values.
  3. 3.
    Now you can add any action here.
Here is an example of displaying a snackbar message that shows the entered value in the PinCode widget.
Trigger action On Completed

Trigger action On Change

Let's see how to trigger an action whenever you enter or delete the value in each field of this widget. This is helpful when you want to provide immediate feedback to the user. For instance, you can check the validity of the entered digit as soon as the user types it in and show a message that it is not valid.
Showing snackbar message as soon as user enter a non-numeric value
To do so:
  1. 1.
    Select the PinCode widget, select Actions from the Properties panel (the right menu), and click + Add Action.
  2. 2.
    Set the Type of Action (aka callback) to On Change. That means actions added under this will be called every time when a user enters each pin value.
  3. 3.
    Now you can add any action here.
Here is an example of displaying a snackbar message when a user enters a non-number value.
Trigger action On Change

Validation

You can validate the Pincode widget to see if a user has entered any value. To do so, wrap the Pincode widget inside the Form widget, In the Form widget, enter the error message you want to display and then trigger the Validate Form action. This will display an error message when a user tries to submit the form without a pincode value. Here are the steps in detail.
Pincode validation
You can also adjust the height to the error text from Properties Panel > Error text height.
Set error text height

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

Aligning pin code fields

By default, all the pin fields are aligned to Space Evenly. Meaning there will be equal space between each pin field.
The following options help you align the pin code fields:
  • Start (
    ): Place pin code fields as close to the beginning as possible.
  • Center (
    ): Place pin code fields as close to the middle as possible.
  • End (
    ): Place pin code fields as close to the end as possible.
  • Space Evenly (
    ): Evenly space pin code fields.
  • Space Around (
    ): Place the free space evenly between the pin code fields with some extra space at the beginning and end.
  • Space Between (
    ): Place the free space evenly between the pin code fields.
To configure the space between and around the pin fields, select the PinCode widget, move to the properties panel, find the Pin Code Alignment property and select among the above options.
Aligning pin code fields

Changing pin field shape and size

To change the pin field shape and size:
  1. 1.
    Select the PinCode widget, move to the properties panel, find the Pin Field Shape property, and here you can set the shape to Box, Circle and Underline.
  2. 2.
    To change the height and width, enter the value in Field Height and Field Width boxes.
  3. 3.
    To create a rounded border when the shape is set to Box, use the Border Radius and Border Width properties.
Changing pin field shape and size

Change colors

You can change colors for the different states of the pin fields. To do so:
  1. 1.
    Select the PinCode widget, move to the properties panel, and change the colors for the following properties:
    • Active Color: This sets the border color when the value is entered.
    • Inactive Color: This sets the border color when there is no value.
    • Selected Color: This sets the border color when the cursor is inside the pin field and the user is about to enter the value.
  2. 2.
    To change the background color instead of only the border color, Enable Active Fill.
Change colors

Customizing cursor

You can show/hide the cursor using the Show Cursor toggle and change the color using the Cursor Color property.

Change pin code text style

See how you can change the text styling.
Previous
RadioButton
Next
Slider
Last modified 1mo ago