Climbers aiming at the top will not be intoxicated by a certain footprint along the way. In the world of code farmers, the beautiful application experience comes from the programmer's handling of details and the realm of self-requirement. Young people are also busy One of the busy code farmers, every day and every week, leaves some footprints. It is the content of these creations. There is a kind of persistence, that is, I don’t know why. If you are confused, you might as well take a look at the track of the code farmers.

If you are interested, you can follow the public account biglead to get the latest learning materials.

• The series of articles from getting started to mastering Flutter is here
• NetEase Cloud Classroom series video tutorials are here

1 Effect preview

As shown in the figure above, we input a long list of content in actual development, which is not conducive to reading, so we need to deal with it.

TextField ( 
      //The pop-up input keyboard is the numeric keyboard 
      keyboardType :  TextInputType . number , 
      // Input text filter 
      inputFormatters :  [ 
        // Only numbers are allowed 
        FilteringTextInputFormatter . digitsOnly , 
        // Only 19 digits are allowed 
        LengthLimitingTextInputFormatter ( 19 ) , 
        / /custom input filter 
        CardNumberInputFormatter ( ) , 
      ] , 
    ) 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

inputFormatters is the validation of the input file

2 Custom TextInputFormatter text input filter

TextEditingValue sets the cursor position of the input box. The selection attribute is used to set the cursor position. The attribute operation is as follows

• int baseOffset: the starting position
• int extentOffset: the end position
• TextAffinity affinity: the position of the cursor

class CardNumberInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {

    print ( " baseoffse is   ${ newValue . selection . baseOffset } " ) ; 
    //The cursor position starts from 0 
    if  ( newValue . selection . baseOffset ==  0 )  { 
      return newValue ; 
    } 
    //Get the input text 
    String inuptData = newValue .text ; //Create character buffer StringBuffer stringBuffer = new StringBuffer ( ) ;
    
      

    for  ( int i =  0 ; i < inuptData . length ; i ++ )  { 
      // get each word strip inuptData[i] 
      stringBuffer . write ( inuptData [ i ] ) ; 
      // index the position of the current word strip 
      int index = i +  1 ; 
      //Add a space in the middle of every four word strips The last digit is not considered 
      if  ( index %  4  ==  0  && inuptData . length != index ) { 
        stringBuffer . write ( " " ) ; 
      } 
    } 
    return  TextEditingValue ( 
      // current text 
      text : stringBuffer . toString ( ) , 
      // cursor position 
      selection :  TextSelection . collapsed ( 
        // set cursor position at the end of text 
        offset : stringBuffer .toString ( ) .length , ) , ) ; } } _ _
      
    
  

• 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

complete