The TextField component is often used in our daily development, so here’s a summary of its usage.

Retrieve information from TextField

1. The first approach is to use the onChanged method and store the current value in a simple variable.

String value = ""; TextField( onChanged: (text) { value = text; },)Copy the code

2. The second method is to use TextEditingController. The controller is attached to the TextField and lets us listen to and control the text of the TextField.

TextEditingController controller = TextEditingController();
TextField(
  controller: controller,
)

print(controller.text);// Outputs the current TextField value
Copy the code

Other callbacks to TextField

/// These are callbacks that are invoked when the user clicks the Finish button on iOS
onEditingComplete: () {},
onSubmitted: (value) {},
Copy the code

Use focus in TextFields

1. Use autofocus

TextField(
  autofocus: true.)Copy the code

2. Change your custom focus

/// Switch to the next TextField when clicking RaisedButton
FocusNode nodeOne = FocusNode();
FocusNode nodeTwo = FocusNode();

TextField(
  focusNode: nodeOne,
),
TextField(
  focusNode: nodeTwo,
),
RaisedButton(
  onPressed: () {
    FocusScope.of(context).requestFocus(nodeTwo);
  },
  child: Text("Next Field"),Copy the code

Change the keyboard properties of TextFields

1. Keyboard type

TextInputType. Text full keyboard (normal) TextInputType. Number (digital keyboard) TextInputType. EmailAddress (normal keyboard with the "@") TextInputType. Datetime (with/and: "Digital keyboard) TextInputType. NumberWithOptions opening (with signature and the number of decimal mode option keyboard) TextInputType. Multiline (optimize the multi-line information) TextField (keyboardType: TextInputType.number, )Copy the code

2. Change the operation buttons on the keyboard

/// This causes the "finish" button to be replaced by the "Continue" button
TextField(
  textInputAction: TextInputAction.continueAction,
)

/// This causes the "finish" button to be replaced by the "send" button
TextField(
  textInputAction: TextInputAction.send,
)
Copy the code

autocorrect

TextField(
  autocorrect: false.)Copy the code

4. Capitalize the text

TextCapitalization.sentences /// The first letter of each sentence is capitalized
TextCapitalization.characters /// All characters in the sentence are capitalized
TextCapitalization.words // capitalize the first letter of each word
TextField(
  textCapitalization: TextCapitalization.sentences,
)
Copy the code

Text style, alignment, and cursor options

1. Text alignment in the text field

/// This will cause the cursor and text to start in the middle of the TextField
TextField(
  textAlign: TextAlign.center,
)
Copy the code

2. Set the text style in the TextField

/// The style property is used to change the appearance, color, font size, and so on of the TextField text.
TextField(
  style: TextStyle(color: Colors.red, fontWeight: FontWeight.w300),
)
Copy the code

3. Change the cursor in TextField

/// Change the cursor color, width, and corner radius. Here we make a red circular cursor
TextField(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(16.0),
  cursorWidth: 16.0.)Copy the code

Controls the size and maximum length in the TextField

1. Control the maximum number of characters

TextField(
  maxLength: 4.)Copy the code

1. Control the maximum number of lines

TextField(
  maxLines: 3.)Copy the code

Fuzzy text

TextField(
  obscureText: true.)Copy the code

Decorate the TextField

1. Use tips

TextField(
  decoration: InputDecoration(
    hintText: "Demo Text",
    hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
  ),
)
Copy the code

2. Add ICONS

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.print)))Copy the code

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.print)))Copy the code

TextField(
  decoration: InputDecoration(
    prefix: CircularProgressIndicator(),
  ),
)
Copy the code

3. Remove the cursor

TextField(
  decoration: InputDecoration.collapsed(hintText: ""))Copy the code

4. Add borders

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder()
  )
)
Copy the code

5. Persistent messages

TextField(
  decoration: InputDecoration(
    helperText: "Hello"),),Copy the code