Inscription
- Holding the sword in the world, starting from your accumulation, you will strive for perfection wherever you go.

This article was first published on the WeChat public account (biglead), my big front-end career, and published in various technical forums simultaneously.

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 "In progress"
• 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 article "This is the article"

1 Brief description

A word TextEditingController is used to operate TextField.

• Preset content for bound TextField
• Get the content entered in the TextField
• Listen to both text input changes and focus changes

2 Basic use of TextEditingController

The first step is to create a TextEditingController instance object. Its constructor can optionally pass the parameter text. The content set by the constructor text will be displayed in the input box when the TextField is created. The code is as follows:

///Create a text controller instance 
///Create method one 
TextEditingController _editingController =  new  TextEditingController ( ) ; 
///Create method two 
TextEditingController _controller2 =  new  TextEditingController ( text :  "initialized" ) ;

• 1
• 2
• 3
• 4
• 5

The second step is to bind the controller to the text input box TextField, the code is as follows:

new  TextField ( 
   //binding controller 
   controller : _editingController , 
   ) ,

• 1
• 2
• 3
• 4

The third step is the common method of TextEditingController controller, the code is as follows:

/// Get the content entered in the TextField 
String getEditeInputTextFunction ( ) { 
  return _editingController . text ; 
}

/// Set the content displayed in the TextField 
void  setEditeInputTextFunction ( String flagText ) { 
   _editingController . text = flagText ; 
}

/// Clear the content displayed in the TextField 
void  clearEditeInputTextFunction ( ) { 
  _editingController . text =  "" ; 
  /// Or use the clear method 
  _editingController . clear ( ) ; 
}

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

During initialization, the cursor remains at the end of the text. The code example is as follows

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///整理
///TextField TextEditingController 分析篇
class TextFeildHomePage6 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TextFeildHomePageState();
  }
}

class TextFeildHomePageState extends State {

  ///Used for the text input box 
  TextEditingController controller =  new  TextEditingController ( ) ; 
  /// Used to control the acquisition and closing of the focus of the TextField 
  FocusNode focusNode =  new  FocusNode ( ) ;

  @override 
  void  initState ( )  { 
    super . initState ( ) ; 
    ///The content of the preset input box 
    String preText =  "" ;

    ///When the control is initialized, the cursor remains at the end of the text 
    controller = TextEditingController . fromValue ( /// Used to set the 
      TextEditingValue to be displayed during initialization 
      ( /// Used to set the text controller.text = "0000" 
        text : preText , /// Set the position of the cursor 
        selection : TextSelection . fromPosition ( ///Used to set the position of the text TextPosition ( 
              affinity : TextAffinity . downstream , /// The length of the cursor to move backward 
              offset : preText . length ) ,
        
        
          
          
              ) , ) , 
    ) ;

    /// Add and listen When the content in the TextFeild changes, the callback focus change will also trigger
     /// onChanged The 
    controller will be called back when the TextFeild text changes . addListener ( ( ) { 
      ///Get the input content 
      String currentStr = controller .text ; print ( "controller also listens to $currentStr" ) ; 
      } ) ;
    

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TextField 讲解"),
        actions: <Widget>[
          FlatButton(child: Text("保存",style: TextStyle(color: Colors.white),),onPressed:  ( ) { 
            ///Get the content of the text input box 
            String inputText   = controller . text ; 
            print ( "Click to save $inputText" ) ; 
          } , ) 
        ] , 
      ) , 
      body :  Center ( 
        ///SizedBox is used to limit one Fixed width height space 
        child :  SizedBox ( 
          width :  400 , 
          height :  110 , 
          child :  Container ( 
            color: Colors . white24 , 
            padding : EdgeInsets . all ( 10 )  , 
            ///Alignment is used to align Widget 
            alignment :  Alignment ( 0 , 0 ) , 
            ///Text input box 
            child :  TextField ( 
              controller : controller , 
              /// When TextField Callback 
              onChanged when the content entered in the field changes :  ( value ) { 
                print ( "Content entered in TextField $value" ); 
              } , 
              ) , 
            ) , 
          ) , 
        ) , 
    ) ; 
  } 
}

• 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
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88

complete