# nextar/flutter_pinput architecture

> Architecture diagram of the GitHub repository nextar/flutter_pinput, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nextar/flutter_pinput
- Repository: https://github.com/nextar/flutter_pinput

## Overview

PinPut is a Flutter widget library for entering PIN/OTP codes. The principal workflow is that an app supplies the widget and its configuration, then the widget presents customizable PIN fields for user input. The README documents validation, animations, autofill, fake cursor, and custom numpad support. The tree identifies a separate state module, but its implementation was not sampled, so its connection to the widget is shown as unverified; no finer runtime stages are inferred.

Main entry points: [`lib/pin_put/pin_put.dart`](https://github.com/nextar/flutter_pinput/blob/master/lib/pin_put/pin_put.dart) (PIN widget), [`lib/pin_put/pin_put_state.dart`](https://github.com/nextar/flutter_pinput/blob/master/lib/pin_put/pin_put_state.dart) (PIN state)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_app_user(("App developer"))
node_pin_widget["PIN widget<br/>[pin_put.dart]"]
node_pin_state["PIN state<br/>[pin_put_state.dart]"]

node_app_user -->|"configures"| node_pin_widget
node_pin_widget -.->|"uses state"| node_pin_state

click node_pin_widget "https://github.com/nextar/flutter_pinput/blob/master/lib/pin_put/pin_put.dart"
click node_pin_state "https://github.com/nextar/flutter_pinput/blob/master/lib/pin_put/pin_put_state.dart"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app_user toneIndigo
class node_pin_widget,node_pin_state toneTeal
```

## Components

### Other components

- **App developer**
- [PIN widget](https://github.com/nextar/flutter_pinput/blob/master/lib/pin_put/pin_put.dart): `lib/pin_put/pin_put.dart`
- [PIN state](https://github.com/nextar/flutter_pinput/blob/master/lib/pin_put/pin_put_state.dart): `lib/pin_put/pin_put_state.dart`

## Connections

- App developer → PIN widget: configures (evidence: `README.md`)
- PIN widget → PIN state: uses state