“This is the 23rd day of my participation in the August Gwen Challenge. For details, see: August Gwen Challenge” juejin.cn/post/698796…

TextField InputDecoration

InputDecoration source code analysis

Const InputDecoration({this.icon, // this. LabelText, // This. LabelStyle, // This. HintStyle, // This. HintMaxLines, // This. ErrorText, // Error message this.errorStyle, // Error message style this.errorMaxLines, / / error message text box maximum number of lines enclosing hasFloatingPlaceholder = true, / / text box after get focus labelText whether floating up enclosing isDense, ContentPadding, this.prefixIcon, this.prefix, // Prepopulate Widget this.prefixText, SuffixIcon, // suffix icon this.suffixText, // prefix Widget this.suffixText, SuffixStyle, // this. Counter, // Widget this. CounterText, // Widget this. // Fill the text box this.fillColor, // fill the color this.errorBorder, FocusedBorder = this.focusedErrorBorder = this.focusedErrorBorder // Get focus border this.disabledBorder when errorText exists, // get focus border this.enabledBorder when errorText exists, // get focus border this.border when errorText exists, // Get focus border this.disabledBorder when errorText exists, // Get focus border this.disabledBorder when errorText exists, // Get focus border this. / / frame enclosing enabled = true, / / input box is available this. SemanticCounterText, enclosing alignLabelWithHint, / / center line will label to the TextField}) const InputDecoration. Collapsed ({@ required enclosing hintText, this.hasFloatingPlaceholder = true, this.hintStyle, this.filled = false, this.fillColor, this.border = InputBorder.none, this.enabled = true, })Copy the code

Collapsed provides a comprehensive way to build decorators and a convenient and easy way to build. By default, collapsed is frameless and does not provide labels or other attributes.

Case try

  1. Icon is a small icon outside the decorator, which can be flexibly set ICONS or other widgets. The default distance from the input box is 16DP. The theme can be set by IconTheme.
return TextField(decoration: InputDecoration(icon: Image.asset('images/ic_launcher.png')));
return TextField(decoration: InputDecoration(icon: Icon(Icons.android)));
Copy the code

  1. LabelText is the description label of the text box, which is of String type and can be directly edited. LabelStyle is the tag style attribute; TextField gets focus and the description tag moves up;
Return TextField(decoration: InputDecoration(labelText: 'iD: ', labelStyle: TextStyle(color: color.purple));Copy the code

  1. HelperText is the auxiliary label of the text box, usually at the bottom of the text box, suggestive content; HelperStyle is the text box auxiliary tag style property; There is no change to whether TextField gets focus;
Return TextField(decoration: InputDecoration(labelText: 'username: ', labelStyle: TextStyle(color: RGB (50, 50, 50)) Colors. Purple), helperText: 'Please enter your phone number or email! ', helperStyle: TextStyle(color: Colors.teal)));Copy the code

  1. HintText is the default prompt message of the text box. If labelText is set, the labelText will be displayed first when the TextField does not get the focus. HintStyle is the style attribute of the text box prompt message. HintMaxLines indicates the maximum number of lines that can be displayed when the prompt message is too long.
return TextField(decoration: InputDecoration( hintStyle: TextStyle(color: Colors.brown), hintMaxLines: 1, hintText: 'Please enter username information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! ')); Return TextField(decoration: InputDecoration(labelText: 'username: ', labelStyle: TextStyle(color: RGB (50, 50, 50)) Colors. Purple), helperText: 'Please enter your phone number or email! ', helperStyle: TextStyle(color: color.teal), hintText: 'Please input user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! ', hintStyle: TextStyle(color: Colors.brown), hintMaxLines: 2));Copy the code

  1. ErrorText is an error message in a text box. Generally, it is displayed at the bottom of a text box. When errorText is set, helperText is not displayed and the default color is red. ErrorStyle is an error message style attribute. ErrorMaxLines is the maximum number of lines that can be displayed when the error message is too long. Similar to hintText;
return TextField(onChanged: (text) { setState(() { _textLength = text.length; }); }, decoration: InputDecoration(labelText: 'userid: ', labelStyle: TextStyle(color: color.purple), helperText:' ', helperStyle: TextStyle(color: color.teal), hintText: 'Please input user name information! ', hintStyle: TextStyle(color: Colors.brown), errorText: _textLength > 11 ? 'No more than 11 usernames! ' : null, errorStyle: TextStyle(color: Colors.pink)));Copy the code

  1. HasFloatingPlaceholder Sets whether the labelText floats upwards when TextField gets focus. When set to false, the labelText is hidden after the focus is obtained and does not float up.
Return TextField(decoration: InputDecoration(labelText: 'username: ', labelStyle: TextStyle(color: RGB (50, 50, 50)) Colors.purple), hasFloatingPlaceholder: false));Copy the code

  1. Whether isDense is a compact text box, true is a compact text box, ICONS and other input box margin smaller;
return TextField(decoration: InputDecoration(icon: Icon(Icons.android), isDense: false));
return TextField(decoration: InputDecoration(icon: Icon(Icons.android), isDense: true));
Copy the code

  1. ContentPadding is the margin between the edit content and the text box;
ReturnTextField (decoration: InputDecoration (contentPadding: EdgeInsets. All (20.0)));Copy the code

  1. prefix… PrefixIcon is the front icon of the text box, fixed in front of the text input box, different from the icon position, its style is adjusted through the IconTheme; PrefixText is pre-filled text, such as before the phone number (+86); Prefix is a pre-populated component that can be set freely and is more flexible, but cannot be used with prefixText. PrefixStyle is the pre-populated component style;
return TextField(decoration: InputDecoration( prefixIcon: Icon(Icons.supervised_user_circle), prefixText: '(+ 86), prefixStyle: TextStyle (color: Colors. The purple. WithOpacity (0.4)))); return TextField(decoration: InputDecoration( prefixIcon: Icon(Icons.supervised_user_circle), prefixStyle: TextStyle (color: Colors. The purple. WithOpacity (0.4)), the prefix: Row (mainAxisSize: mainAxisSize. Min, the children: <Widget>[Icon(Icons.phone), Text('(+86)')])));Copy the code

  1. suffix… Is the text box rear component series; With the prefix… Consistent usage;
Return TextField(decoration: InputDecoration(suffixIcon: Icon(Icons. Close), suffixText: 'close ', suffixStyle: TextStyle (color: Colors. The purple. WithOpacity (0.4)))); return TextField(decoration: InputDecoration( suffixIcon: Icon(Icons.close), suffixStyle: TextStyle(color: Colors. The purple. WithOpacity (0.4)), suffix: Row (mainAxisSize: mainAxisSize. Min, the children: < widgets > [Text (' closed '), Icon (the Icons. Remove_red_eye)])));Copy the code

  1. The counter series is a counter at the bottom right of the text box. When maxLengths are set, the ratio of edit characters to total lengths is normally displayed at the bottom right, which can be adjusted by the counter series. CounterText displays the contents for counters; CounterStyle is the counterStyle attribute;
Return TextField(maxLength: 20, decoration: InputDecoration(counterText: 'Maximum length is not more than 20', counterStyle: TextStyle(color: color) Colors.blueAccent)));Copy the code

  1. The filled specifies whether the text box is filled with color. FilledColor takes effect only when the box is true.
Return TextField(decoration: InputDecoration(fillColor: color.green. WithOpacity (0.4), filled: true));Copy the code

  1. Enabled: indicates whether the text box is available. False: indicates that the text box is unavailable and the focus cannot be obtained.
return TextField(decoration: InputDecoration(enabled: false));
Copy the code

  1. AlignLabelWithHint is used to align the label with the center of TextField when setting multiple lines. True overwrites the default behavior of aligning the label with the center of TextField.
return TextField(maxLines: null, decoration: InputDecoration( alignLabelWithHint: true, labelText: 'User name: ', hintMaxLines: null, helperText:' Please enter mobile phone number or email! ', hintText: 'Please enter username information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! Please enter user name information! '));Copy the code
  1. Border is a series that includes borders in various environments; The default border is the normal border; There are basically three types of borders:

A. InputBorder is generally set to no border.

return TextField(decoration: InputDecoration(border: InputBorder.none));
Copy the code

B. UnderlineInputBorder is generally set to a line border at the bottom. In the side dish test, the effect is more obvious if the rounded corner of the border is set to 10DP and the background color is added.

Return TextField(decoration: InputDecoration(filled: true, fillColor: color.green. WithOpacity (0.4), border: UnderlineInputBorder(borderRadius: Borderradius.all (radius.circular (10.0))), borderSide: borderSide (color: borderSide) Colors. Purple, Width: 4.0, style: borderstyle. solid))));Copy the code

C. OutlineInputBorder is generally set to a rounded border. Compared to UnderlineInputBorder, the gapPadding attribute is used for the spacing between the floating labelText and the border.

Return TextField(decoration: InputDecoration(labelText: 'userid: ', labelStyle: TextStyle(color: color.purple), border: OutlineInputBorder(gapPadding: 10.0, borderRadius: Borderradius. all(radius.circular (10.0)), borderSide: BorderSide(color: color.purple, width: 4.0, style: borderstyle. solid))));Copy the code

UnderlineInputBorder and OutlineInputBorder are invalid for setting the border border color.

  1. EnabledBorder indicates the available border style, enabled is true;

Tips:

  1. EnabledBorder does not take effect when errorText exists.
  2. If no other border attribute is set, the focus is the focus border in ThemeData by default. Setting border or focusedBorder takes effect.
// UnderlineInputBorder and only enabledBorder return TextField(Decoration: InputDecoration(filled: true,fillColor: Colors. Green. WithOpacity (0.4), enabledBorder: UnderlineInputBorder (borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: borderSide (color: Colors. Purple, width: 4.0)))); // UnderlineInputBorder and set enabledBorder and border return TextField(decoration: InputDecoration(filled: True, fillColor: color.green. WithOpacity (0.4), enabledBorder: UnderlineInputBorder(borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: borderSide (color: color.purple, width: 4.0)), border: UnderlineInputBorder (borderRadius: borderRadius. All (Radius circular (10.0))))); // UnderlineInputBorder and errorText is not empty return TextField(Decoration: InputDecoration(true, fillColor: Color.green. WithOpacity (0.4), errorText: 'No more than 11 digits! ', errorStyle: TextStyle(color: Colors.pink), enabledBorder: UnderlineInputBorder(borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: borderSide (color: color.purple, width: 4.0)), border: UnderlineInputBorder (borderRadius: borderRadius. All (Radius circular (10.0))))); // OutlineInputBorder and only enabledBorder return TextField(decoration: InputDecoration(labelText: 'username: ', labelStyle: TextStyle(color: Colors.purple), enabledBorder: OutlineInputBorder(borderRadius: BorderRadius. All (Radius. Circular (10.0)), borderSide: borderSide (color: Colors. The purple. WithOpacity (0.4), width: (3.0)), border: OutlineInputBorder borderRadius: borderRadius. All (Radius. The circular (10.0))))); // OutlineInputBorder Sets enabledBorder and errorText is not empty return TextField(decoration: InputDecoration(labelText: 'User name: ', labelStyle: TextStyle(color: color.purple), errorText:' Please do not exceed 11 digits! ', errorStyle: TextStyle(color: Colors.pink), enabledBorder: OutlineInputBorder(borderRadius: BorderRadius. All (Radius. Circular (10.0)), borderSide: borderSide (color: Colors. The purple. WithOpacity (0.4), width: 3.0)))); // OutlineInputBorder class, set enabledBorder and border and errorText is not empty return TextField(decoration: InputDecoration(labelText: 'userid: ', labelStyle: TextStyle(color: color.purple), errorText:' Please do not exceed 11 digits! ', errorStyle: TextStyle(color: Colors.pink), enabledBorder: OutlineInputBorder(borderRadius: BorderRadius. All (Radius. Circular (10.0)), borderSide: borderSide (color: Colors. The purple. WithOpacity (0.4), width: (3.0)), border: OutlineInputBorder borderRadius: borderRadius. All (Radius. The circular (10.0)))));Copy the code

  1. DisabledBorder indicates the time frame that is unavailable. The value of disabledBorder is false. And disabledBorder does not take effect when errorText exists.
// UnderlineInputBorder return TextField(decoration: InputDecoration(enabled: false, filled: true, fillColor: Colors. Green. WithOpacity (0.4), disabledBorder: UnderlineInputBorder (borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: borderSide (color: colors.pink, width: 4.0)))); // UnderlineInputBorder and set errorText return TextField(decoration: InputDecoration(enabled: false, filled:) True, fillColor: color.green. WithOpacity (0.4), errorText: 'Do not exceed 11 digits! ', errorStyle: TextStyle(color: Colors.pink), disabledBorder: UnderlineInputBorder(borderRadius: Borderradio.all (radio.circular (10.0)), borderSide: borderSide (color: colors.pink, width: 4.0)); // OutlineInputBorder type return TextField(decoration: InputDecoration(enabled: false, labelText: 'Username: ', labelStyle: TextStyle(color: Colors.purple), disabledBorder: OutlineInputBorder(borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: borderSide (color: colors.green, width: 4.0)))); // OutlineInputBorder and set errorText return TextField(Decoration: InputDecoration(enabled: false, labelText: 'User name: ', labelStyle: TextStyle(color: color.purple), errorText:' Please do not exceed 11 digits! ', errorStyle: TextStyle(color: Colors.pink), disabledBorder: OutlineInputBorder(borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: borderSide (color: colors.pink, width: 4.0))));Copy the code

  1. FocusedBorder is the border when the focus is obtained. FocusedBorder does not take effect when errorText exists.
// UnderlineInputBorder return TextField(decoration: InputDecoration(filled: true, fillColor: Colors. Green. WithOpacity (0.4), focusedBorder: UnderlineInputBorder (borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: borderSide (color: colors.pink, width: 4.0)), enabledBorder: UnderlineInputBorder (borderRadius: borderRadius. All (Radius. The circular (10.0)), borderSide: borderSide (color: Colors purple, width: 4.0)))); // UnderlineInputBorder and set errorText return TextField(decoration: InputDecoration(filled: true, fillColor: Color.green. WithOpacity (0.4), errorText: 'No more than 11 digits! ', errorStyle: TextStyle(color: Colors.pink), focusedBorder: UnderlineInputBorder(borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: borderSide (color: colors.pink, width: 4.0)), enabledBorder: UnderlineInputBorder (borderRadius: borderRadius. All (Radius. The circular (10.0)), borderSide: borderSide (color: Colors purple, width: 4.0)))); // OutlineInputBorder type return TextField(decoration: InputDecoration(labelText: 'username: ', labelStyle: TextStyle(color: Colors. Purple), enabledBorder: OutlineInputBorder(borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: BorderSide (color: Colors. The purple. WithOpacity (0.4), width: 3.0)), focusedBorder: OutlineInputBorder (borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: borderSide (color: colors.green, width: 4.0)))); // OutlineInputBorder type and set errorText return TextField(decoration: InputDecoration(labelText: 'username: ', labelStyle: TextStyle(color: color.purple), errorText: 'No more than 11 digits! ', errorStyle: TextStyle(color: Colors.pink), focusedBorder: OutlineInputBorder(borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: borderSide (color: colors.pink, width: 4.0)), enabledBorder: OutlineInputBorder (borderRadius: borderRadius. All (Radius. The circular (10.0)), borderSide: borderSide (color: Colors. The purple. WithOpacity (0.4), width: 3.0))));Copy the code

  1. ErrorBorder is the border when errorText is not empty and the focus is not obtained;
// UnderlineInputBorder return TextField(decoration: InputDecoration(filled: true, fillColor: Color.green. WithOpacity (0.4), errorText: 'No more than 11 digits! ', errorStyle: TextStyle(color: Colors.pink), errorBorder: UnderlineInputBorder(borderRadius: Borderradio.all (radio.circular (10.0)), borderSide: borderSide (color: color.black. WithOpacity (0.4), width: 4.0)))); // OutlineInputBorder type return TextField(decoration: InputDecoration(labelText: 'username: ', labelStyle: TextStyle(color: Colors. Purple), errorText: 'No more than 11 digits! ', errorStyle: TextStyle(color: Colors.pink), errorBorder: OutlineInputBorder(borderRadius: Borderradio.all (radio.circular (10.0)), borderSide: borderSide (color: color.black. WithOpacity (0.4), width: 3.0))));Copy the code

  1. FocusedErrorBorder is the border when errorText is not empty and focus is obtained;
// UnderlineInputBorder return TextField(decoration: InputDecoration(filled: true, fillColor: Color.green. WithOpacity (0.4), errorText: 'No more than 11 digits! ', errorStyle: TextStyle(color: Colors.pink), focusedErrorBorder: UnderlineInputBorder(borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: borderSide (color: colors.teal, width: 4.0)), errorBorder: UnderlineInputBorder (borderRadius: borderRadius. All (Radius. The circular (10.0)), borderSide: borderSide (color: Colors. Black, width: 4.0)))); // OutlineInputBorder type return TextField(decoration: InputDecoration(labelText: 'username: ', labelStyle: TextStyle(color: Colors. Purple), errorText: 'No more than 11 digits! ', errorStyle: TextStyle(color: Colors.pink), focusedErrorBorder: OutlineInputBorder(borderRadius: Borderradius.all (radius.circular (10.0)), borderSide: borderSide (color: colors.pink, width: 4.0)), errorBorder: OutlineInputBorder (borderRadius: borderRadius. All (Radius. The circular (10.0)), borderSide: borderSide (color: Colors. The purple. WithOpacity (0.4), width: 3.0))));Copy the code

A small extension

In real development, the keyboard may need to be turned off at any time, so we can just listen; Small dishes listen to a text input box, when the input character length is greater than 11 characters, the keyboard is closed;

Return TextField(Controller: Controller, decoration: InputDecoration(labelText: 'username: ', labelStyle: TextStyle(color: Colors. Purple), errorText: 'No more than 11 digits! ', errorStyle: TextStyle(color: Colors.pink))); void initState() { super.initState(); Controller.addlistener (() {setState(() {if (controller.text.length >= 11) {// Empty the keyboard FocusScope.of(context).requestFocus(FocusNode()); }}); }); }Copy the code

Text input box does have a lot of details to study and try, small dishes only a preliminary understanding, to be further study; Always update the Flutter version. There may be more or less updates to the same Widget. If you have any questions, please feel free to comment!

Source: Little Monk A Ce