TextField input box
The attributes are as follows:
TextField(controller: controller, // The maximum length allowed to input, a letter, a symbol, a Chinese character count 1 and the bottom right corner of the word display maxLength: 20, // Whether to continue input after the maximum length // maxLengthEnforced: The onchange method will still be called, and the return value is maxLengthEnforced if the value exceeds the specified length: // The maximum number of lines that can be displayed in the input box is 23/10. When the maximum number of lines is exceeded, the scroll displays maxLines: 3, // Whether to autocorrect: FocusNode: _focusNode, // Whether the focus is automatically obtained after jumping to the page, the cursor is automatically displayed in the input box. Press autofocus: ObscureText: false, obscureText: false, obscureText: false, // Text alignment: TextAlign. Right,// textDirection is invalid // TextAlign: textalign. left,// textDirection is invalid // TextAlign: TextAlign. Center,// center // TextAlign: textalign.start,// TextDirection.ltr is left, textDirection.rtl is right // TextAlign: TextAlign. End,// TextDirection. LTR to the right, textDirection. RTL to the left // TextAlign: TextDirection: textDirection. LTR, text from the left with the cursor to the left Textdirection. RTL, // from the right input cursor on the right // input TextStyle fontSize color etc. Color.blue), // whether to enable the input if false cannot be entered, and errorText is invalid enabled: true, // enabled: False, // inputFormatters: [WhitelistingTextInputFormatter digitsOnly], / / allow input format, not control the keyboard, only conform to the format of the input will display digitsOnly said only allow Numbers. / / inputFormatters: [WhitelistingTextInputFormatter (RegExp (" [a-z] "))], / / only allow input lowercase letters a to z. If maxLength is set, the length limit will be the same as this limit, but the number of words will be the same as that in the lower right corner. [LengthLimitingTextInputFormatter (15)], / / blacklist check, only allow you to enter a given text / / inputFormatters besides rules: [BlacklistingTextInputFormatter (RegExp (" [a-z] "))], / / do not allow the input lowercase letters a-z / / inputFormatters: [BlacklistingTextInputFormatter(RegExp("[a-z]"),replacementString: "-")],// A -z lowercase letters are not allowed to be entered. If "-" is entered, use "-" instead of // the type of keyboard that pops up. KeyboardType: textinputType. text, // text // keyboardType: TextInputType. Number,// number + part of the common mathematics meet // keyboardType: TextInputType. Phone,// keyboardType: TextInputType datetime, / / digital keyboard + part time commonly used in line with the ":", and "-". / / keyboardType: TextInputType emailAddress, / / mail English keyboard + in line with the "@" and ". "/ / keyboardType: TextInputType multiline, / / multi-line input control function of the enter key to wrap the / / keyboardType: Textinputtype. url,//url format ("/" and ".") Textinputaction. search, // search // TextInputAction: textinputAction. none,// Default return symbol // TextInputAction: TextInputAction. Done,// Android displays the return symbol // TextInputAction: textinputAction. go,// start // TextInputAction: TextInputAction. Next,// Next // TextInputAction: textinputAction. send,// send // TextInputAction: TextInputAction continueAction, / / android does not support / / TextInputAction: TextInputAction emergencyCall, / / android does not support / / TextInputAction: TextInputAction. Newline, / / android display carriage return / / TextInputAction: TextInputAction route, / / android does not support / / TextInputAction: TextInputAction. Join, / / android does not support / / TextInputAction: TextInputAction. Previous, / / android display carriage return / / TextInputAction: TextInputAction unspecified, / / android display carriage return / / control keyboard case tried to switch But if no effect?? / / textCapitalization: textCapitalization. Characters, / / input keyboard is English uppercase / / textCapitalization: Text3%. None, // keyboard default for lowercase // text3% : TextCapitalization sentences, / / when input the first letter of each sentence, uppercase, keyboard input follow-up letters lowercase/keyboard/TextCapitalization: TextCapitalization. Words, / / the first letter of each word in the input, the keyboard uppercase, input other letters lowercase / / keyboard cursor color cursorColor: Colors. Red, / / the cursor rounded cursorRadius: Radius. Circular (5), // cursorWidth: 10, // Input box border style decoration: InputDecoration(border: BorderRadius: borderRadius. Circular (10.0), borderSide: borderSide (color: borderSide) Color. Transparent), // The height of the TextField is controlled by this property. ContentPadding: EdgeInsets. White, filled: true, // labelText: 'Hello', // The following attributes can be used to remove the border of TextField disabledBorder: InputBorder.none, enabledBorder: InputBorder.none, focusedBorder: None,), // keyboardAppearance only ios // keyboardAppearance: Brightness. Light, keyboardAppearance: Brightness. Dark, //?? ScrollPadding: EdgeInsets. All (50), //?? // dragStartBehavior: dragStartBehavior. start, dragStartBehavior: DragStartBehavior down, / / long according to input text, the true display system clipboard false don't display enableInteractiveSelection: BuildCounter: buildcount, // To call onTap with one input: () { print('ontap'); }, onChanged: (text) {print('change $text'); }, onSubmitted: (text) {// Print ('submit $text'); }, // Call this method and then call onEditingComplete: () {print('onEditingComplete'); },),Copy the codebuildCounter
When maxLength is set, the number of words in the red circle will appear in the lower right corner. The buildCounter property allows you to customize the word count display in the lower right corner.
Widget buildcount( /// The build context for the TextField BuildContext context, {/// current word length @required int currentLength, /// maximum word length @required int maxLength, /// }) {return Text("$currentLength $maxLength"); }Copy the codeTextEditingController and FocusNode
- TextEditingController, which can be seen as a reference to TextField, is used to retrieve the text of the input field, set the cursor position, clear the input field, and so on.
- FocusNode, which manages the focus of TextField.
class _FlutterTextFieldPageState extends State<FlutterTextFieldPage> { var controller = TextEditingController(); FocusNode _focusNode = new FocusNode(); Void focusListener() {print(_focusNode.hasfocus); // focus of the current input box // _focusNode.unfocus(); Void controllerListener() {print(controller.text); // controller. Text = "aaa"; // if(controller.text.length>5) {// controller.clear(); // print(controller.selection); TextSelection(baseOffset: 4, extentOffset: 4, affinity: TextAffinity.downstream, isDirectional: False) // Set text selected, BaseOffset start index extentOffset End index(not included) If they are the same set the cursor position if they are different select the text between them // controller.selection = TextSelection(baseOffset: 2, extentOffset: 4, affinity: TextAffinity.downstream, isDirectional: false); controller.selection = TextSelection(baseOffset: 1, extentOffset: 1, affinity: TextAffinity.upstream, isDirectional: true); } @override void initState() { // TODO: implement initState super.initState(); // Add focus version listener _focusNode.addListener(focusListener); // Add controller. AddListener (controllerListener) for input changes; } @ override void the dispose () {/ / disponse need to deal with the controller. The removeListener (controllerListener); _focusNode.removeListener(focusListener); controller.dispose(); _focusNode.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: SingleChildScrollView( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Divider( height: 20, color: Colors.grey, ), TextField( controller: Controller, // set controller focusNode: _focusNode, // Set focus management)])); }}Copy the codeDecoration Indicates the border style of the input box
Properties overview is as follows:
TextField(decoration: InputDecoration(icon: icon (Icons. Phone)), // Display the Icons in front of the input box, in front of the text and underline // Input box cursor Icons and text prefixIcon: PrefixText: "prefixText",// Display in the input box, the text in front of the cursor is in focus and prefixStyle is displayed: TextStyle(color:Colors.yellow), prefix: Image.asset("images/img04.jpg",width: 20, height: 20,),// Display the specified image or other Widget in front of the cursor in the input box after getting the focus. Note that prefix cannot be used with prefixIcon and prefixText at the same time to specify the icon and word suffixIcon after the input box cursor: Icon(icons.phone), // displayed in the input box, after the cursor text, the last Icon of the input box suffixText: "suffixText", // displayed in the input box, the last text of the input box but before suffixIcon. Note suffixText cannot co-exist with suffix suffixStyle: TextStyle(color: color.yellow), suffix: image.asset ("images/img04.jpg",width: 20,height: 20,), // display in the input box, CounterText :"counterText", // The text prompt displayed in the bottom right corner of the underline input will override the word limit displayed in the bottom right corner of maxLength. counterStyle: TextStyle(color: Colors.pink), counter: Icon(icons.send),// The prompt displayed in the lower right corner of the input underline, can be any Widget, LabelText :"labelText", // The prompt displayed in the input box, once the input box gets the focus, the font will be reduced and moved up to the top of the input, as a prompt, labelStyle is used: TextStyle(color: color.green), helperText: "helperText", // Display the prompt below the underline in the input box, prompting to use helperStyle: TextStyle(color: color.green) Colors. Blue), hasFloatingPlaceholder: true, / / the default value is true, according to whether labelText buoyancy, true buoyancy, false disappear after get focus labelText hintText said: HintStyle: TextStyle(color: color.grey), hintMaxLines: 2, // display more lines than the prompt, display more lines than the prompt... ErrorText :"errorText", // An error message at the bottom of the input box, usually used for error messages, such as incorrect password and user name. Color.orange), errorMaxLines: 1, errorMaxLines: 1, errorMaxLines: 1, errorMaxLines: 1 errorBorder: UnderlineInputBorder(borderSide: BorderSide( width: 5,color: Colors.orange,style: Borderstyle.solid)), // when losing focus, error will display the BorderStyle under the underline. If this is not set, the default underline focusedErrorBorder: UnderlineInputBorder(borderSide: BorderSide( width: 5, color: Colors.green, style: Borderstyle.solid)), // the BorderStyle under error is underlined when getting focus, the default underline is used if not // the text in the input box isDense: // Internal padding contentPadding: // Internal padding: // internal padding contentPadding: EdgeInsets. All (20), // The padding of the input box is valid for the text inside // the background color fillColor: color. red, // The padding color inside the input box is true. DisabledBorder: UnderlineInputBorder(borderSide: borderSide (width: 5,color: color.blue,style: Borderstyle.solid), // The input box is disabled when the underline style is used. This property is invalid if errorText is set enabledBorder: UnderlineInputBorder(borderSide: borderSide (width: 5,color: colors.orange,style: Borderstyle.solid)), // The underlined style when the input box is enabled enabled: false,// Whether to enable focusedBorder: UnderlineInputBorder(borderSide: BorderSide(width: 5,color: color.blue,style: borderstyle.solid)), // When getting focus, underline the style border: OutlineInputBorder(borderSide: BorderSide(width: 5,color: Colors.yellow,style: Borderstyle.solid)), // lowest level border, border // border: inputBorder.none, // Hide input box line),),Copy the codeThe breakdown is as follows:
- Icon An icon displayed in front of an input field, before text and underscores. Note that the icon is outside the input box
TextField(decoration: InputDecoration(icon: icon (Icons. Phone), // display the Icons in front of the input box, before the text and underline),),Copy the code- Prefix displays the specified image or other Widge in the input box in front of the cursor. Pay attention to the internal input
TextField( decoration: InputDecoration( prefix: Image.asset("images/img04.jpg",width: 40,height: 40,) // Display the specified image or other Widget in front of the cursor in the input box after getting focus. Note that prefix cannot be specified with prefixIcon prefixText.Copy the code- PrefixIcon Is displayed inside the input box, in front of the cursor. Note that the icon is outside the input box
- PrefixText Displays the text in the input box before the cursor
TextField(decoration: InputDecoration(prefixIcon: Icon(Icons. Phone)),// Display the Icons in the input box in front of the cursor, note that Icon is outside the input box prefixText: TextStyle(color: color.red),// TextStyle),),Copy the code- SuffixIcon Displays the icon at the end of the input box after the cursor text
- SuffixText Displays the text at the end of the input box after the cursor text
TextField(decoration: InputDecoration(suffixIcon: Icon(Icons. Phone)), // "SuffixText ", // displays the last text in the input box but before the suffixIcon. SuffixStyle: TextStyle(color: color.red),// TextStyle),),Copy the code- Suffix is displayed in the input box, followed by the specified picture or other Widget. Note suffixText cannot coexist with suffix
TextField( decoration: InputDecoration( suffix: Image.asset("images/img04.jpg",width: 40,height: 40,) // display in the input box, the last specified image or other Widget),),Copy the code- CounterText Displays a text prompt in the lower right corner of the underline input that overrides the word limit displayed in the lower right corner of maxLength. Only one counterText and one counter can exist
TextField( maxLength: 33, decoration: InputDecoration(counterText:"counterText", // The text prompt displayed in the lower right corner of the input underline will overwrite the word limit displayed in the lower right corner of maxLength. counterStyle: TextStyle(color: Colors.pink), ), ),Copy the code- Counter displays the prompt in the lower right corner of the input underline. It can be any Widget, but only one counterText and counter can exist
TextField( maxLength: 33, decoration: InputDecoration( counter: Icon(Icons. Send),// The prompt displayed in the bottom right corner of the input underline, can be any Widget, counterText and counter can only exist one),),Copy the code- LabelText A prompt displayed in an input box that shrinks and moves up over the input once the input box has gained focus for use as a prompt
- HasFloatingPlaceholder defaults to true, indicating whether the labelText floats, and false indicating that the labelText disappears after the focus is captured.
HasFloatingPlaceholder = true if the input box has no focus:
TextField( decoration: InputDecoration( icon: LabelText :"labelText", // The prompt displayed in the input box, once the input box gets the focus, the font will be shrunk and moved up above the input, using labelStyle: TextStyle(color: Color.green), hasFloatingPlaceholder: false, // default value: true, labelText will float, false,Copy the code- HelperText Displays the prompt below the underline in the input box, prompting to use
TextField( decoration: InputDecoration( icon: Icon(Icons.phone), helperText: "HelperText ", // Display the prompt below the underline in the input box, using helperStyle: TextStyle(color: color.blue),),),Copy the code- HintText A prompt that is displayed in an input box when the input box is empty and disappears once input begins
When the input box is empty:
TextField( decoration: InputDecoration( icon: Icon(Icons.phone), hintText: HintStyle: TextStyle(color: color.grey), hintMaxLines: 2, // the maximum number of lines displayed in the prompt, exceeding the number of lines displayed...) ,),Copy the code- ErrorText Indicates an error message, such as an incorrect password or user name. The underline in the input box is changed to red
- ErrorMaxLines Specifies the number of lines to display.
- When errorBorder is out of focus, the border style shown under error is underlined, otherwise the default underline is used
- When focusedErrorBorder gets focus, the border style displayed under error is underlined, if not set, the default underline is used
ErrorBorder is used when there is no focus
TextField( decoration: InputDecoration( icon: Icon(Icons.phone), errorText: "ErrorText ", // The text at the bottom of the input box, usually used for error messages, such as incorrect password and user name, etc. Color.orange), errorMaxLines: 1, errorMaxLines: 1, errorMaxLines: 1, errorMaxLines: 1 errorBorder: UnderlineInputBorder(borderSide: BorderSide(width: 5,color: Colors.orange,style: Borderstyle.solid)), // when losing focus, error will display the BorderStyle under the underline. If this is not set, the default underline focusedErrorBorder: UnderlineInputBorder(borderSide: BorderSide(width: 5, color: color.green,style: borderstyle.solid)), // the BorderStyle displayed under error is underlined when the focus is set, the default underline is used if it is not set),),Copy the code- ContentPadding The padding of the input box is valid for the text inside
- IsDense changes whether the input box isDense or not. The default is false. When isDense changes to true, the icon and spacing will decrease and the line spacing will decrease
TextField( decoration: InputDecoration( icon: Icon(Icons.phone), contentPadding: EdgeInsets. All (20), // The padding of the input box is effective for the inner text isDense: true, // Change the input box to be dense, default is false, change to true, ICONS and spacing will be smaller and line spacing will be smaller),),Copy the code- FillColor The filling color of the input box must be filled=true
- The room is filled.
TextField( maxLength: 311, maxLines: 3, decoration: InputDecoration( icon: Icon(Icons.phone), fillColor: // Filled =true filled: true,),Copy the code- Enabled Indicates whether the input box is enabled. True Indicates whether the input box is enabled. False Indicates whether the input box is disabled
- DisabledBorder Border when disabled
- EnabledBorder Border when enabled
- FocusedBorder The border after the focus is obtained
Border when disabled
TextField( decoration: InputDecoration( icon: Icon(Icons.phone), // errorText: "errorText", disabledBorder: UnderlineInputBorder(borderSide: borderSide (width: 5,color: color.blue,style: borderStyle.solid)), // Underline style when input box is disabled. This property is invalid if errorText is set enabledBorder: UnderlineInputBorder(borderSide: borderSide (width: 5, color: colors.orange,style: Borderstyle.solid)), // When the input box is enabled, the underlined style focusedBorder: UnderlineInputBorder(borderSide: borderSide (width: 5,color: Colors. Red, style: BorderStyle. Solid)), / / get focus, the style of the underline enabled: true,),),Copy the code- Border Border of the lowest level, displayed when no other border is set
TextField( decoration: InputDecoration( icon: Icon(Icons.phone), border: OutlineInputBorder( borderSide: BorderSide(width: 5,color: color.yellow, style: borderstyle.solid)), // Lowest level of border, no other border is set),),Copy the code- Border Border. The value can be OutlineInputBorder or UnderlineInputBorder
Set OutlineInputBorder as a focusedBorder
TextField( decoration: InputDecoration( prefixIcon: Icon(Icons.phone), focusedBorder: OutlineInputBorder(borderSide: BorderSide(width: 5, color: Colors.red, style: BorderStyle.solid), borderRadius: EnabledBorder: UnderlineInputBorder(borderSide: borderSide (width: 5,color: 1); Orange,style: borderStyle.solid), // The style of the underline when the input box is enabled. FocusedBOrder enabled: true,),),Copy the code- Border Border, hidden border Value InputBorder. None
TextField(decoration: InputDecoration(prefixIcon: Icon(icon.phone), border: InputBorder. None, // Hide input box line),),Copy the code