Detailed explanation of shutter textfield

effect ：

Finally, it's still right

TextField

Let's go , This attribute has the most 、 With the most function points Widget.

Basic attributes

TextField

It's a

material design

Style input box , It has many properties , Besides, decorators

InputDecoration

There are also many attributes , But it's all simpler , So don't worry about , And listen to me .

First look at the source code , Important or commonly used attributes are annotated .

TextField

 const TextField({
 Key key,
 this.controller,// controller
 this.focusNode,// The focus of
 this.decoration = const InputDecoration(),// decorate
 TextInputType keyboardType,// Keyboard type , Input type
 this.textInputAction,// Keyboard button
 this.textCapitalization = TextCapitalization.none,// Case write
 this.style,// style
 this.strutStyle,
 this.textAlign = TextAlign.start,// Alignment mode
 this.textDirection,
 this.autofocus = false,// Autofocus
 this.obscureText = false,// Whether to hide the text , The password type is displayed
 this.autocorrect = true,// AutoCorrect
 this.maxLines = 1,// Maximum number of rows , The height is synchronized with the number of rows
 this.minLines,// The minimum number of lines
 this.expands = false,
 this.maxLength,// Maximum number of entries , When there is a value, there will be a counter in the lower right corner
 this.maxLengthEnforced = true,
 this.onChanged,// Input change callback
 this.onEditingComplete,// When input is complete , coordination TextInputAction.done Use
 this.onSubmitted,// When submitting , coordination TextInputAction
 this.inputFormatters,// Input verification
 this.enabled,// Is it available
 this.cursorWidth = 2.0,// Cursor width
 this.cursorRadius,// Cursor fillet
 this.cursorColor,// Cursor color
 this.keyboardAppearance,
 this.scrollPadding = const EdgeInsets.all(20.0),
 this.dragStartBehavior = DragStartBehavior.start,
 this.enableInteractiveSelection,
 this.onTap,// Click event
 this.buildCounter,
 this.scrollPhysics,
 }) 


Many parameters , In fact, even half of the attributes are not used in daily development , But I will try my best to introduce .

InputDecoration

 const InputDecoration({
 this.icon,// The icon outside the left
 this.labelText,// Suspended prompt , May replace hintText
 this.labelStyle,// Style of floating prompt text
 this.helperText,// Help text
 this.helperStyle,
 this.hintText,// Input prompt
 this.hintStyle,
 this.hintMaxLines,
 this.errorText,// Error message
 this.errorStyle,
 this.errorMaxLines,
 this.hasFloatingPlaceholder = true,// Whether to display levitation prompt text
 this.isDense,
 this.contentPadding,// Infill
 this.prefixIcon,// The icon in the left side
 this.prefix,
 this.prefixText,// Text on the left
 this.prefixStyle,
 this.suffixIcon,// Right inner icon
 this.suffix,
 this.suffixText,
 this.suffixStyle,
 this.counter,// Custom counters
 this.counterText,// Count text
 this.counterStyle,// Count style
 this.filled,// Whether to fill
 this.fillColor,// Fill color
 this.errorBorder,
 this.focusedBorder,
 this.focusedErrorBorder,
 this.disabledBorder,
 this.enabledBorder,
 this.border,// Frame
 this.enabled = true,
 this.semanticCounterText,
 this.alignLabelWithHint,
 })


Many parameters , It is mostly an icon of a small function point 、 Text and style , Is not complicated .

ok, Go through the basic attributes , Just have an impression in your mind . Let's start practicing .

style

Basic style

 TextField(),


It's simple , No parameters , Of course, the effect is also very simple .

style You can change the style .

Hide text

modify

obscureText

Property value

 TextField(
 obscureText: true,
 ),


You can see that the input is no longer visible , It has become a common type of password .

Keyboard type

Keyboard type   namely   Types that can be entered , such as

number

You can only enter numbers

 TextField(
 keyboardType: TextInputType.number,
 ),


TextInputType

optional type ：

• text

• multiline

• number

• phone

• datetime

• emailAddress

• url

Keyboard button

The button in the lower right corner of the keyboard , Common examples are completion , In the lower right corner is a completion check button , The picture above shows .

 TextField(
 textInputAction: TextInputAction.done,
 ),


TextInputAction

The other options ：

• none

• unspecified

• done

• go

• search

• send

• next

• previous

• continueAction

• join

• route

• emergencyCall

• newline

Case write

That is to control the case of input English letters , For example, the first letter of a word is capitalized

 TextField(
 textCapitalization: TextCapitalization.words,
 ),


TextCapitalization

Other options for ：

• words： Capitalize the first letter of a word

• sentences： The first letter of a sentence is capitalized

• characters： All capitals

• none： The default is no

cursor

The default is a blue vertical bar

 TextField(
 cursorColor: Colors.orange,
 cursorWidth: 15,
 cursorRadius: Radius.circular(15),
 ),


Maximum number of rows

Set up the most 3 That's ok

 TextField(
 maxLines: 3,
 ),


It can be seen from the effect that ,TextField The height has become 3 That's ok . But I just want to input at most 3 That's ok , Acquiescence or 1 What about the height of the row ？ Don't panic , Just add a parameter ： 

minLines

 TextField(
 maxLines: 3,
 minLines: 1,
 ),


You can see ,TextField The height of is adaptive .

Counter

That is, there will be a count in the lower right corner

 TextField(
 maxLength: 8,
 ),


Default ： Current input length / Maximum length , Can we change this place , Certainly. , Here is a simple operation

 TextField(
 maxLength: 8,
 decoration: InputDecoration(
 counter: Text(" Custom count  0/100"),
 ),
 ),


Here I use decoration

InputDecoration

Under the

counter

, The type is

widget

, Then the expansion degree is quite high , I only used one

Text

, other widget It's OK, too .

If it's just pure words ,InputDecoration There's another one

counterText

Properties and

counterStyle

.

Icon

The icon has 3 Kind of ：

• The icon outside the left

 TextField(
 decoration: InputDecoration(
 icon: Icon(Icons.person),
 ),
 ),


• Left inner icon

 TextField(
 decoration: InputDecoration(
 prefixIcon: Icon(Icons.phone_android),
 ),
 ),


• Right inner icon

 TextField(
 decoration: InputDecoration(
 suffixIcon: IconButton(
 icon: Icon(Icons.close),
 onPressed: () {
 controller.clear();
 },
 ),
 ),
 ),


Added an icon on the right

IconButton

, Because it has a click event , We can clear it when we click TextField The content in .

The above is the introduction of the icon , In fact, in addition to icons , The corresponding position can also display text or customize other widget For example, something happened

prefixIcon

There are other 3 Attributes , The usage is the same as the custom counter described above .

 this.prefix,
 this.prefixText,
 this.prefixStyle,


Prompt text

The prompt text has 4 Kind of ：

• Input prompt text

 TextField(
 controller: controller,
 decoration: InputDecoration(
 hintText: ' Please enter your account number aaa',
 ),
 ),


• Floating prompt text

 TextField(
 controller: controller,
 decoration: InputDecoration(
 hintText: ' Please enter your account number aaa',
 labelText: ' Please enter your account number ',
 ),
 ),


You can see , Default display

labelText

, Only after focusing

hintText

, therefore labelText It can replace hintText Of .

• Help prompt text

 TextField(
 controller: controller,
 decoration: InputDecoration(
 helperText: " Help text ",
 helperStyle: TextStyle(color: Colors.blue)
 ),
 ),


Always on the bottom left

• Error message text

 TextField(
 controller: controller,
 decoration: InputDecoration(
 errorText: " You didn't enter anything ",
 ),
 ),


Remove underscores

 TextField(
 decoration: InputDecoration.collapsed(hintText: " Input box without underline "),
 ),


It's fine too

decoration: null

,  The difference is that there is no hintText 了

Frame

 TextField(
 decoration: InputDecoration(
 border: OutlineInputBorder(),
 ),
 ),


If this fillet doesn't like it , You can also change it , such as ：

 TextField(
 decoration: InputDecoration(
 border: OutlineInputBorder(
 borderRadius: BorderRadius.all(Radius.circular(30)),
 ),
 ),
 ),


Get input

There are two ways ：

• onChanged
  onChanged
  It is a callback when the input content changes , Return to one
  String
  Type value , You can use a variable to record

 TextField(
 onChanged: (text) {
 print(" When input changes " + text);
 },
 ),


• controller I.e. controller , initialization ：

 var controller;

 @override
 void initState() {
 super.initState();
 controller = TextEditingController();
 controller.addListener(() {});
 }


Configure to TextField

 TextField(
 controller: controller,
 ),


Get content

controller.text


Called in events

controller.text

That is, return the input content .

Turn off the soft keyboard

Often when we submit an event , You need to turn off the soft keyboard

Here we use

focusNode

initialization ：

FocusNode userFocusNode = FocusNode();


To configure ：

 TextField(
 focusNode: userFocusNode,
 ),


Then call... Where you need it ：

userFocusNode.unfocus();


check

In fact, there is a

inputFormatters

attribute

 final List<TextInputFormatter> inputFormatters;


Continue to look at TextInputFormatter Source code , Yes 3 A subclass ：

• BlacklistingTextInputFormatter

• WhitelistingTextInputFormatter

• LengthLimitingTextInputFormatter

The blacklist 、 White list and length limit , Let's find a random one to see how the source code implements verification ：

Looking down, you will see such a piece of code ：

 static final BlacklistingTextInputFormatter singleLineFormatter
 = BlacklistingTextInputFormatter(RegExp(r'\n'));


The key words are

RegExp

, In fact, it is just the regular expression we usually use .

In this case , We can also customize the verification rules , For example, check the mobile phone number ：

 String validateMobile(String value) {
 String patttern = r'(^[0-9]*$)';
 RegExp regExp = new RegExp(patttern);
 if (value.length == 0) {
 return " Cell phone number is empty ";
 } else if (!regExp.hasMatch(value)) {
 return " The phone number format is incorrect ";
 }
 return null;
 }


The above is just our general verification , For forms, it is recommended to use

From

The parcel

TextFormField

abnormal

• After the soft keyboard pops up

• After the soft keyboard pops up, the height overflows

terms of settlement

： Wrap with sliding components （ListView etc. ）, When the soft keyboard pops up , The input box will also automatically slide up .

<br>

summary

That's all , Then I wrote a small log in demo：

github：

https://github.com/yechaoa/wanandroid_flutter

Official documents ：https://api.flutter.dev/flutter/material/TextField-class.html

<br>

Writing is not easy to , If it's useful, just like it or star Chant

<br>