Introduction to TextField attribute and listening event of Flutter input box

textField is used for text input, and it provides many properties:

const TextField({
   ...
   TextEditingController controller, 
   FocusNode focusNode,
   InputDecoration decoration = const InputDecoration(),
   TextInputType keyboardType,
   TextInputAction textInputAction,
   TextStyle style,
   TextAlign textAlign = ,
   bool autofocus = false,
   bool obscureText = false,
   int maxLines = 1,
   int maxLength,
   ,
   ToolbarOptions? toolbarOptions,
   ValueChanged<String> onChanged,
   VoidCallback onEditingComplete,
   ValueChanged<String> onSubmitted,
   List<TextInputFormatter> inputFormatters,
   bool enabled,
    = 2.0,
   ,
   ,
   ,
   ...
 })

property	type	illustrate
controller	TextEditingController	Controller, through which you can get text content and listen to edit text events, in most cases we need to actively provide a controller
focusNode	InputDecoration	Focus control
decoration	InputDecoration	Used to control the appearance of text, such as prompt text, background color, border, etc.
keyboardType	TextInputType	Used to set the default keyboard type for input boxes
textInputAction	TextInputAction	Keyboard action icon button, it is an enum value
style	TextStyle	Text style being edited
textAlign	TextAlign	Alignment of text boxes in horizontal direction
autofocus	bool	Whether to automatically obtain focus
obscureText	bool	Whether to hide the text being edited, for password input scenarios
maxLines	int	Maximum number of rows in the input box
maxlength	int	Maximum length of text box
maxLengthEnforcement		What to do when the text length exceeds the text box length
toolbarOptions	ToolbarOptions	Options that appear when pressed for a long time
onChange	ValueChanged<String>	The callback function when the input box is changed can also be listened to through the controller.
onEditingComplete	VoidCallback	The callback function triggered after input is not accepted
onSubmitted	ValueChanged<String>	Receive the ValueChanged<String> parameter
inputFormatters	List<TextInputFormatter>	Used to specify the input format, can be used to verify the format
enable	bool	When bool, the input box will become disabled
cursorWidth, cursorRadius and cursorColor		These three properties are used to customize the input box cursor width, rounded corners, and color

Example: Note that the prompts are all set in InputDecoration

void mian()=&gt;runApp(MyApp());
 
 class MyApp extends StatelessWidget
 {
 
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: "Text Output Box",
       home:Scaffold(
         appBar: AppBar(title:const Text("Text input box")),
         body:Column(
           children:const  &lt;Widget&gt;[
             TextField(
               autofocus: true,
               decoration: InputDecoration(
                 //text                 labelText:"username",
                 // Prompt message                 hintText: "Username or Email",
                 //icon                 prefixIcon: Icon(),
               ),
               //Set the maximum number of rows               maxLines: 1,
             ),
             TextField(
               autofocus: true,
               decoration: InputDecoration(
                 labelText:"password",
                 hintText: "Your login password",
                 prefixIcon: Icon(),
               ),
               //Hide text               obscureText: true,
             ),
           ],
         ),
       )
     );
   }
 }

Listen to events:

Two ways to get content:

Define two variables to save the username and password, and then save the input contents when onChanged is triggered.
Get it directly through Controller, onChanged is a simple listening to change events, but there are some other methods in Controller that can be used.

The first method:

onChanged: (value){
                 print("What you type is $value");
 }

The second method:

Define a controller:

TextEditingController _unameController = TextEditingController();
     _unameController.addListener(() {
       print("What you entered is：${_unameController.text}");
 });

Complete code:

void main()=&gt;runApp(MyApp());
 
 class MyApp extends StatelessWidget
 {
   @override
   Widget build(BuildContext context) {
     //Define a controller     TextEditingController _unameController = TextEditingController();
     //Call .addListener to override the method in it     _unameController.addListener(() {
       print("What you entered is：${_unameController.text}");
     });
     return MaterialApp(
       title: "Text Output Box",
       home:Scaffold(
         appBar: AppBar(title:const Text("Text input box")),
         body:Column(
           children: &lt;Widget&gt;[
             TextField(
                 //Set up the monitoring               controller: _unameController,
               autofocus: true,
               decoration: const InputDecoration(
                 //text                 labelText:"username",
                 // Prompt message                 hintText: "Username or Email",
                 //icon                 prefixIcon: Icon(),
               ),
               //Set the maximum number of rows               maxLines: 1,
             ),
             TextField(
               autofocus: true,
               decoration:const  InputDecoration(
                 labelText:"password",
                 hintText: "Your login password",
                 prefixIcon: Icon(),
               ),
               //Hide text               obscureText: true,
                 //Form change event               onChanged: (value){
                 print("What you type is $value");
               },
             ),
           ],
         ),
       )
     );
   }
 }

This is the end of this article about introducing the TextField attribute and listening events of the Flutter input box. I hope it will be helpful to everyone's learning and I hope everyone will support me more.