TextField

This component gives the possibility to the user to write text.

Examples

Basic textfield

The onChanged event will be triggered if the user type (or remove) some text in the field. So you can save it to your data and react to any user input later.

{
    "type": "textfield",
    "value": "fixedValue",
    "onChanged": {
        // This listener cannot change the value because the value is fixed to "fixedValue"
        "_type": "listener",
        "name": "changeValue"
    }
}

Complex textfield

Like some other components (container, ...), textfield allow you to change its style using the decoration property. But as you can see, it's really easy to react to the user input on the fly.

{
    "type": "textfield",
    // The value is stored in the app data
    "value": data,
    "style": {
        "decoration": {
            "icon": {
                "type": "icon",
                "value": "star",
            },
            "filled": true,
            "fillColor": 0xFFBBDEFB,
            "border": {
                "type": "outline",
            },
            "hintText": "hint",
            "helperText": "helper",
            "labelText": "label",
            // Showing the string length under the textfield
            "counterText": "${data.length}"
        },
    },
    "minLines": 3,
    "maxLines": 5,
    // This listener takes care of changing the value in the app data
    "onChanged": {"code": "CodeA"}
},

Properties

Attribute	Description	Type
_type	The type of the element	textfield
value	The value displayed inside the Textfield	string
autocorrect	Whether to enable the autocorrection	boolean
autofillHints	The type of this text input to provide autofill hints.	array
autofocus	Whether this Textfield should be focused initially.	boolean
buildCounter	Callback that generates a custom counter view.	Listener
dragStartBehavior	Determines the way that drag start behavior is handled.	string start down
enabled	Whether the text field is enabled.	boolean
enableInteractiveSelection	Whether to enable user interface options to change the text selection.	boolean
expands	Whether the TextField is sized to fill its parent.	boolean
keyboardType	The type of the keyboard to use for editing the text.	TextInputType
maxLength	The maximum number of characters to allow in the text field.	integer
maxLengthEnforcement	Determines how the maxLength limit should be enforced.	string none enforced truncateAfterCompositionEnds
maxLines	The maximum number of lines to show at one time.	integer
minLines	The minimum number of lines to occupy on the screen.	integer
name	The name that will be used in the form.	string
obscureText	Whether to hide the text being edited.	boolean
onAppPrivateCommand	This is used to receive a private command from the input method.	Listener
onChanged	Callback when the user changes the text field value.	Listener
onEditingComplete	Callback when the user finishes editing the text field.	Listener
onSubmitted	Callback when the user tells he is done editing the text field.	Listener
onTap	Callback when the user taps on the text field.	Listener
readOnly	Whether the text can be changed.	boolean
showCursor	Whether to show the cursor.	boolean
style	The style of the Textfield.	TextFieldStyle
textCapitalization	Configures how the platform keyboard will select an uppercase or lowercase keyboard.	string none words sentences characters
textDirection	The direction of the text.	string ltr rtl
textInputAction	The type of the action button to use for the keyboard.	string continueAction done emergencyCall go join newline next none previous route search send unspecified
toolbarOptions	Configuration of toolbar options	ToolbarOptions