Inscription
- Holding the sword in the world, starting from your accumulation, wherever you go, you must strive for perfection, that is, toss every day.

TextField series of articles

• The basic use of TextField and the common properties of TextField
• TextField focus acquisition control chapter "click to view details"
• TextField input text style TextStyle article "Click to view details"
• TextField input text textAlign alignment analysis chapter "click to view details"
• TextField input text decoration configure border style and prompt text analysis "click to view details"
• TextField TextEditingController Analysis "Click to View Details"

Introduction to TextFields

In a word, TextField is used for user input text box in flutter application development.

TextField text input box

1 The easiest to use

//This will create a base TextField with an underline by default 
TextField ( ) 

• 1
• 2

2 TextField common property configuration

  Widget buildTextFeild2(){
    return  TextField(
      /**
       * TextCapitalization.sentences This is the most common type of capitalization, where the first letter of each sentence is converted to uppercase.
       * TextCapitalization.characters Capitalize all characters in the sentence.
       * TextCapitalization.words Capitalize the first letter of each word.
       */ 
      textCapitalization : TextCapitalization . sentences , 
      ///The color of the cursor 
      cursorColor : Colors . red , 
      /// Set the radians of the four corners of the cursor 
      cursorRadius : Radius . circular ( 10 ) , 
      /// Set the width of the cursor 
      cursorWidth :  6 , 
      ///Set the type of the 
      keyboard keyboardType : TextInputType . phone , 
      ///The style of the Enter key of the keyboard 
      textInputAction : TextInputAction . next ,
      ///Set whether the input box can be edited 
      /// true can be input 
      /// false cannot be input 
      enabled :  true , 
      ///password maxLines =1 
      obscureText :  false , 
      ///limit the length of the input text in the input box 
      // /Setting this item will make the lower right corner of the TextField have a statistical string of the number of inputs 
      maxLength :  30 , 
      ///Limit the number of lines of text input in the input box 
      maxLines :  4 , 
      ///Callback when the text in the input box changes The function 
      onChanged :  ( value ) { 
        print ( "$value is called back" ) ; 
      } , 
      /// Done is pressed on the keyboard 
      onEditingComplete :  ()  {

      } , 
    ) ; 
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39

3 Summary of keyboard styles

        ///The style of the keyboard enter key 
        /**
         * none means do not pop up the keyboard
         * unspecified newline
         * none means do not pop up the keyboard
         * done done or done
         * go to or go
         * search search or search
         * send send or send
         * next next item or next
         * previous
         * continueAction continue or continue
         * join join or join
         * route route or route
         * emergencyCall emergency call
         * newline newline or newline
         */
        textInputAction: TextInputAction.newline,

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

4 TextField settings are not editable

The text input box TextField can be set to be uneditable by setting the enabled value of the TextField property to false, or setting the read-only property readOnly of the TextField to true. The difference between the two is that the border styles used are different.

If enabled is false, the border style used by TextField is only the border style configured by disabledBorder.

If the readOnly is true read-only mode, TextField can use the comprehensive style configured by focusedBorder, enabledBorder, and errorBorder.

Replenish:

• ObscureText password setting instructions, when the input text is a password option, the input text is invisible. If the maxLines property is set, then maxLines=1 must be required, because in practical applications, the password is generally not too long. One line is enough to carry, when the set maxLines>1, the flutter application will report an exception at runtime.
• onChanged callback function, this function will be called back only when the text content in the input text box changes, it will not be triggered when the focus changes.

[1] At present, the Flutter series of tutorials are published for free on the watermelon video, which is updated daily. Welcome to pay attention to receive reminders and click to view the tips

[2] This official account will publish a series of special articles for the first time, and paid video courses will be published in the official account for free. On your way to work or just before going to bed, this official account is a small choice for you to browse knowledge and dry goods. , Collection is not as good as action, at that moment, the official account will remind you that it is time to learn.