Flutter - the most detailed (TextField) tutorial

Introduction to TextField

A text input box with complex properties. You can specify controllers, text styles, decorative lines, line limits, cursor styles, and more. Listen for input box change events.

scenes to be used:

Search box, enter account password, etc.

Attributes	effect
controller	input box listener
decoration	Input box decoration attributes
textAlign	content alignment
textAlignVertical	text vertical alignment
textDirection	character direction
maxLength	Enter the maximum length
cursorColor	cursor color
cursorHeight	cursor height
cursorWidth	cursor width
showCursor	Whether to display the cursor
onEditingComplete	edit completed
onChanged	Respond when text changes
onSubmitted	Respond when click OK

InputDecoration property

Attributes	effect
icon	Icon to the left of the border
iconColor	The color of the left icon
label	labelText()
labelText	label text content
labelStyle	label text style
helperText	Left bottom text content
helperStyle	left bottom text style
helperMaxLines	left bottom text max lines
hintText	Prompt text content
hintStyle	Use TextStyle to modify the style
hintTextDirection	The direction of the prompt text
hintMaxLines	The maximum number of lines of prompt text content
errorText	Enter exception prompt text
errorStyle	Input exception prompt text style
errorMaxLines	Enter the maximum number of lines of exception prompt text
contentPadding	Input padding
prefixIcon	inner left icon
prefixIconConstraints	inner left icon constraint size
prefix	inner left text
prefixText	inner left text
prefixStyle	inner left text style
prefixIconColor	inner left icon color
suffixIcon	inner right icon
suffix	inner right text
suffixText	inner right text
suffixStyle	inner right text style
suffixIconColor	inner right icon color
suffixIconConstraints	内部右侧图标约束大小
counter	右侧底部文本内容
counterText	右侧底部文本内容
counterStyle	右侧底部文本内容
enabledBorder	禁用之后显示边线
border	边线相关
enabled	是否禁用

label 属性效果图

icon 属性效果图
常用于左侧图标展示

border 属性效果图
输入框边框

hintText 属性效果图
未点击时文案提示

counter 属性效果图

helperText 属性效果图

prefixIcon 属性效果图

suffixIcon 属性效果图

整合部分属性代码块与效果图

TextField(
                controller: _controller,
                style: const TextStyle(color: Colors.blue),
                decoration: const InputDecoration(
                  label: Text("标签label"),
                  icon: Icon(Icons.favorite),
                  iconColor: Colors.black,
                  border: OutlineInputBorder(),
                  hintText: "提示文本hintText",
                  hintStyle: TextStyle(color: Colors.grey, fontSize: 15),
                  contentPadding: EdgeInsets.all(2),
                  counter: Text("提示文本counter"),
                  helperText: "帮助文本helperText",
                  prefixIcon: Icon(Icons.arrow_left),
                  suffixIcon: Icon(Icons.arrow_right),
                  suffix: Text('suffix'),
                ),
                onEditingComplete: () {
    
    
                  print('onEditingComplete');
                },
                onChanged: (v) {
    
    
                  print('onChanged:' + v);
                },
                onSubmitted: (v) {
    
    
                  FocusScope.of(context).requestFocus(_focusNode);
                  print('onSubmitted:' + v);
                  _controller.clear();
                },
              )