Flutter TextField Widget: A Comprehensive Guide
The TextField widget is a cornerstone of user input in Flutter applications. Whether you're building a login screen, a chat application, or a search bar, the
TextFieldprovides a flexible and feature-rich way to capture user data.What is a TextField in Flutter?
In Flutter,
TextFieldis a widget that allows users to input text. It is one of the most commonly used widgets for form fields, chat input, or search functionality.Example Use Case:
A login form to capture the username and password.
A search bar in an e-commerce app.
A chat input field in a messaging app.
Basic TextField Usage
To use a
TextField, simply include it in your widget tree. Here's a minimal example:TextField( decoration: InputDecoration( labelText: 'Enter your name', hintText: 'John Doe', border: OutlineInputBorder(), ), ),Explanation
labelText: Adds a label above the input field.hintText: Displays placeholder text inside the input field.border: Adds a border around the field.
Properties of TextField
1.
controllerType:
TextEditingControllerPurpose: Manages the text inputted in the field. Use it to read, set, or clear the field's content programmatically.
Example:final TextEditingController _controller = TextEditingController(); TextField( controller: _controller, );2.
focusNodeType:
FocusNodePurpose: Manages focus for the
TextField. Use it to check focus status or move focus between fields.Example:
final FocusNode _focusNode = FocusNode(); TextField( focusNode: _focusNode, );
3.
keyboardTypeType:
TextInputTypePurpose: Specifies the type of keyboard to show (e.g., email, number, phone).
Values:
TextInputType.text(default)TextInputType.numberTextInputType.emailAddressTextInputType.multiline
Example:
TextField( keyboardType: TextInputType.emailAddress, );
4.
textInputActionType:
TextInputActionPurpose: Specifies the action button on the keyboard (e.g., "Done", "Search", "Next").
Values:
TextInputAction.done
TextField( textInputAction: TextInputAction.next, );
5.
decorationType:
InputDecorationPurpose: Customizes the appearance of the
TextField.Common Sub-Properties:
labelText: Adds a label above the field.hintText: Adds placeholder text inside the field.prefixIcon/suffixIcon: Adds an icon before/after the field.border: Defines the field's border.
Example:
TextField( decoration: InputDecoration( labelText: 'Email', hintText: 'Enter your email', prefixIcon: Icon(Icons.email), border: OutlineInputBorder(), ), );
6.
styleType:
TextStylePurpose: Defines the text's appearance (color, font size, weight, etc.).
Example:
TextField( style: TextStyle( color: Colors.blue, fontSize: 18, ), );
7.
textAlignType:
TextAlignPurpose: Aligns the text horizontally in the field.
Values:
TextAlign.left(default)TextAlign.right
Example:
TextField( textAlign: TextAlign.center, );
8.
textAlignVerticalType:
TextAlignVerticalPurpose: Aligns the text vertically in the field.
Example:
TextField( textAlignVertical: TextAlignVertical.center, );
9.
obscureTextType:
boolPurpose: Masks the input text (useful for passwords).
Default Value:
falseExample:
TextField( obscureText: true, );
10.
maxLinesType:
intPurpose: Sets the maximum number of lines for the text.
Default Value:
1Example
TextField( maxLines: 3, );
11.
minLinesType:
intPurpose: Sets the minimum number of lines for the text.
Example:
TextField( minLines: 2, );
12.
maxLengthType:
intPurpose: Limits the number of characters in the field.
Example:
TextField( maxLength: 50, );
13.
readOnlyType:
boolPurpose: Makes the field non-editable.
Default Value:
falseExample:
TextField( readOnly: true, );
14.
enabledType:
boolPurpose: Enables or disables the
TextField.Default Value:
trueExample:
TextField( enabled: false, );
15.
cursorColorType:
ColorPurpose: Sets the color of the cursor.
Example:
TextField( cursorColor: Colors.red, );
16.
cursorWidthType:
doublePurpose: Sets the thickness of the cursor.
Default Value:
2.0Example:
TextField( cursorWidth: 3.0, );
17.
onChangedType:
ValueChanged<String>Purpose: Called when the user changes the text.
Example:
TextField( onChanged: (value) { print('Text changed: $value'); }, );
18.
onSubmittedType:
ValueChanged<String>Purpose: Called when the user submits the field (e.g., presses "Done").
Example:
TextField( onSubmitted: (value) { print('Text submitted: $value'); }, );
19.
autofocusType:
boolPurpose: Automatically focuses the field when the screen is displayed.
Default Value:
falseExample:
TextField( autofocus: true, );
20.
autocorrectType:
boolPurpose: Enables/disables the auto-correction feature.
Default Value:
trueExample:
TextField( autocorrect: false, );
21.
enableSuggestionsType:
boolPurpose: Enables/disables suggestions (useful for password fields).
Default Value:
trueExample:
TextField( enableSuggestions: false, );
22.
scrollPaddingType:
EdgeInsetsPurpose: Sets padding when the field is scrolled into view.
Default Value:
EdgeInsets.all(20.0)Example:
TextField( scrollPadding: EdgeInsets.all(50.0), );
23.
toolbarOptionsType:
ToolbarOptionsPurpose: Configures the options available in the text selection toolbar.
Example:
TextField( toolbarOptions: ToolbarOptions( copy: true, paste: true, ), );
24.
showCursorType:
boolPurpose: Shows/hides the cursor.
Default Value:
trueExample:
TextField( showCursor: false, );
25.
inputFormattersType:
List<TextInputFormatter>Purpose: Applies formatting rules (e.g., restricting input).
Example:
TextField( inputFormatters: [ FilteringTextInputFormatter.digitsOnly, ], );
By leveraging these properties effectively, you can fully customize the behavior and appearance of a
TextFieldin Flutter to meet your application's requirements.Happy Coding!! 🙂
Great explanation of TextField in Flutter! This widget is a must-know for creating interactive forms and input fields. Thanks for breaking it down so clearly!
ReplyDelete