Users can enter text using the TextField widget, which is a core input widget in Flutter.
It is appropriate for a variety of use scenarios because to the flexible collection of characteristics and customization options it offers.
We will examine the main characteristics and attributes of the TextField widget in Flutter in this tutorial.
You must integrate the TextField widget into your Flutter project before you can use it.
Make sure the essential dependencies are installed first. Import the content after that.
Understanding the Properties of TextField in Flutter
1. controller
The controller property of the TextField widget allows you to associate a TextEditingController with the text field. This controller gives you access to the entered text, as well as the ability to modify it programmatically.
2. decoration
The decoration property is used to customize the visual appearance of the text field. It accepts an instance of InputDecoration that allows you to set properties such as the label text, hint text, prefix or suffix icons, border, and more.
3. onChanged
The onChanged callback is triggered whenever the user modifies the text field. It provides the current value of the text field as an argument, allowing you to perform actions based on the user’s input, such as updating UI elements or making API calls.
4. maxLines
The maxLines property specifies the maximum number of lines that the text field can display. Setting it to null allows the user to enter multiple lines of text, creating a multi-line text field.
5. keyboardType
The keyboardType property determines the type of keyboard that is displayed to the user when they focus on the text field. There are various options available, including numeric keyboards, email keyboards, URL keyboards, and more.
6. textCapitalization
The textCapitalization property defines how the entered text should be capitalized. It offers options such as TextCapitalization.none (no capitalization), TextCapitalization.words (capitalize the first letter of each word), TextCapitalization.sentences (capitalize the first letter of each sentence), and TextCapitalization.characters (capitalize every character).
7. style
The style property allows you to specify the text style for the entered text. You can customize properties such as the font size, font weight, color, and more.
8. autofocus
The autofocus property determines whether the text field should automatically receive focus when the widget is first displayed. Setting it to true ensures that the text field is ready for input without requiring an additional tap.
9. obscureText
The obscureText property is used for password fields or any other scenario where you want to hide the entered text. When set to true, the entered text is masked, usually with asterisks or dots.
10. textAlign
The textAlign property defines the alignment of the entered text within the text field. It accepts values such as TextAlign.left, TextAlign.right, TextAlign.center, and TextAlign.justify.
11. maxLength
The maxLength property specifies the maximum number of characters allowed in the text field. You can use this property to enforce a character limit for user input.
12. buildCounter
The buildCounter property allows you to customize the display of the character counter, which indicates the current length of the entered text and the maximum allowed length. You can provide a custom function that returns a widget to define the counter’s appearance.
TextField widget is part of the dart package. Here is an illustration of how to import the package:
import 'package:flutter/material.dart';
Next, you can use the TextField widget in your widget tree. Here’s a basic example:
TextField(
decoration: InputDecoration(
labelText: 'Enter your Number',
),
)
We constructed a TextField with a straightforward decoration that contains a label text in the aforementioned code snippet.
The user is given a visual signal regarding the text field’s purpose thanks to this.
Controller and Retrieving Input
A TextEditingController can be used to retrieve the user’s input that was entered into the TextField.
You can read the text that has been typed or programmatically alter it using this controller. Here’s an illustration of how a controller is used:
TextEditingController _textEditingController = TextEditingController();
TextField(
controller: _textEditingController,
decoration: InputDecoration(
labelText: 'Enter your Number',
),
)
We built a TextEditingController with the number _textEditingController and applied it to the TextField’s controller property in the code above.
By using _textEditingController.text, you may get at the text that was typed.
Handling User Input
The onChanged callback, which is offered by the TextField widget, is triggered anytime the user makes changes to the text field.
You can take actions based on the user’s input with this callback. Here’s an illustration:
TextField(
onChanged: (value) {
print('User input: $value');
},
decoration: InputDecoration(
labelText: 'Enter your name',
),
)
The onChanged callback, which prints the entered text anytime the user edits the text field, is included in the code excerpt above.
You can use your own logic to update UI components or access APIs in place of the print statement.
Related Posts
Creating a Snackbar in Flutter
StartActivityForResult in Flutter