The Stac TextFormField allows you to build a Flutter TextFormField widget using JSON.
To know more about the TextFormField widget in Flutter, refer to the official documentation.
Properties
| Property | Type | Description |
|---|
| id | String | The identifier for the text form field. |
| compareId | String | The identifier to compare with another text form field. |
| decoration | StacInputDecoration | The decoration to show around the text form field. |
| initialValue | String | The initial value of the text form field. |
| keyboardType | StacTextInputType | The type of keyboard to use for editing the text. |
| textInputAction | StacTextInputAction | The action button to use for the keyboard. |
| textCapitalization | StacTextCapitalization | How the text should be capitalized. Defaults to TextCapitalization.none. |
| style | StacTextStyle | The style to use for the text. |
| textAlign | StacTextAlign | How the text should be aligned. Defaults to TextAlign.start. |
| textAlignVertical | StacTextAlignVertical | How the text should be aligned vertically. |
| textDirection | StacTextDirection | The direction of the text. |
| readOnly | bool | Whether the text form field is read-only. Defaults to false. |
| showCursor | bool | Whether to show the cursor. |
| autofocus | bool | Whether the text form field should focus itself if nothing else is already focused. Defaults to false. |
| obscuringCharacter | String | The character to use for obscuring text. Defaults to •. |
| maxLines | int | The maximum number of lines for the text. |
| minLines | int | The minimum number of lines for the text. |
| maxLength | int | The maximum number of characters for the text. |
| obscureText | bool | Whether to obscure the text. |
| autocorrect | bool | Whether to enable autocorrect. Defaults to true. |
| smartDashesType | StacSmartDashesType | The type of smart dashes to use. |
| smartQuotesType | StacSmartQuotesType | The type of smart quotes to use. |
| maxLengthEnforcement | StacMaxLengthEnforcement | How the max length limit should be enforced. |
| expands | bool | Whether the text form field should expand to fill its parent. Defaults to false. |
| keyboardAppearance | StacBrightness | The appearance of the keyboard. |
| scrollPadding | StacEdgeInsets | The amount of space by which to inset the text form field when scrolling. Defaults to StacEdgeInsets(bottom: 20, top: 20, left: 20, right: 20). |
| restorationId | String | The restoration ID to save and restore the text form field’s state. |
| enableIMEPersonalizedLearning | bool | Whether to enable personalized learning in the IME. Defaults to true. |
| enableSuggestions | bool | Whether to enable suggestions. Defaults to true. |
| enabled | bool | Whether the text form field is enabled. |
| cursorWidth | double | The width of the cursor. Defaults to 2. |
| cursorHeight | double | The height of the cursor. |
| cursorColor | StacColor | The color of the cursor. |
| hintText | String | The hint text to display. |
| autovalidateMode | StacAutovalidateMode | The mode to use for autovalidation. |
| inputFormatters | List<StacInputFormatter> | The list of input formatters to apply to the text. Defaults to an empty list. |
| validatorRules | List<StacFormFieldValidator> | The list of validator rules to apply to the text. Defaults to an empty list. |
decoration supports Flutter input decoration fields such as labelText, hintText, prefixIcon, suffixIcon, borders, fill colors, and floatingLabelBehavior.
| Property | Type | Description |
|---|
| floatingLabelBehavior | String | Controls when the label floats. Supported values: auto, always, never. |
Use inputFormatters to restrict or transform user input. The supported formatter type values are allow, deny, and mask.
| Property | Type | Description |
|---|
| type | String | Formatter type: allow, deny, or mask. |
| rule | String | Regular expression used by the formatter. |
| mask | String | Mask pattern used when type is mask; # consumes matching input values. |
{
"inputFormatters": [
{
"type": "mask",
"rule": "\\d",
"mask": "##/##/####"
}
]
}
Validator Rules
Use validatorRules to validate user input. Each entry is a StacFormFieldValidator with a rule, an optional message shown when validation fails, and an optional options map for parameterized rules.
| Property | Type | Description |
|---|
| rule | String | The validator to apply (see below). |
| message | String | Error message shown when validation fails. Defaults to Invalid input when omitted. |
| options | Map | Arguments for parameterized rules. Ignored by rules that take no arguments. |
Validators are powered by the flutter_validators package.
flutter_validators treats an empty string as invalid (e.g. isEmail('') is
false), so any field with validatorRules is effectively required — an
empty value fails validation. There is no built-in “validate only when filled”
option. For an optional field, omit validatorRules; if you need conditional
validation, handle the blank-input check in your app before applying the rules.
No-argument rules: isAlpha, isAlphanumeric, isAscii, isBase32, isBase58, isBoolean, isCreditCard, isDate, isDecimal, isEmail, isFQDN, isHexColor, isHexadecimal, isInt, isIP, isJson, isJWT, isLatLong, isLowercase, isMACAddress, isMD5, isMongoId, isNumeric, isOctal, isPhone, isPort, isSemVer, isSlug, isUppercase, isURL, isUUID.
Parameterized rules (read arguments from options):
| Rule | Options |
|---|
isLength | min (int), max (int, optional) |
isByteLength | min (int), max (int, optional) |
isFloat | min (double, optional), max (double, optional) |
isBase64 | urlSafe (bool) |
isStrongPassword | minLength, minLowercase, minUppercase, minNumbers, minSymbols |
contains | seed (String), ignoreCase (bool), minOccurrences (int) |
equals | comparison (String) |
isIn | values (List of String) |
matches | pattern (String) — a raw regular expression |
compare | fieldId (String) — id of another field to compare values with |
The matches rule matches the pattern anywhere in the value, so anchor it with ^...$ for a full-string match. The compare rule is useful for confirm-password fields. Remember that every rule fails on empty input, so a field carrying any of these rules is treated as required.
{
"type": "textFormField",
"id": "password",
"obscureText": true,
"validatorRules": [
{
"rule": "isStrongPassword",
"message": "Use a stronger password"
},
{
"rule": "isLength",
"options": { "min": 8, "max": 32 },
"message": "Password must be 8-32 characters"
}
]
}
Example
StacTextFormField(
id: 'date',
autovalidateMode: StacAutovalidateMode.onUserInteraction,
inputFormatters: [
StacInputFormatter(
type: StacInputFormatterType.mask,
rule: r'\d',
mask: '##/##/####',
),
],
style: StacTextStyle(fontSize: 16, fontWeight: StacFontWeight.w400, height: 1.5),
decoration: StacInputDecoration(
labelText: 'Date of birth',
hintText: 'DD/MM/YYYY',
floatingLabelBehavior: 'always',
filled: true,
fillColor: StacColors.white,
border: StacOutlineInputBorder(borderRadius: 8, color: '#24151D29'),
),
)
{
"type": "textFormField",
"id": "date",
"autovalidateMode": "onUserInteraction",
"inputFormatters": [
{
"type": "mask",
"rule": "\\d",
"mask": "##/##/####"
}
],
"style": {
"fontSize": 16,
"fontWeight": "w400",
"height": 1.5
},
"decoration": {
"labelText": "Date of birth",
"hintText": "DD/MM/YYYY",
"floatingLabelBehavior": "always",
"filled": true,
"fillColor": "#FFFFFF",
"border": {
"type": "outlineInputBorder",
"borderRadius": 8,
"color": "#24151D29"
}
}
}