A brief understanding of the decoration property of the TextField component input box of the basic components of Flutter
decoration
The decoration property is used to set the decoration of the input box. The property value is of type InputDecoration. Controls the appearance of the input box and the style of the prompt message.
InputDecoration controls the common properties of the prompt information style of the input box
As follows:
(1) icon: Set the icon to be displayed on the left side of the input box.
(2) labelText: Set the description information of the input box. When the input box gets the focus, it will float to the top by default.
(3) helperText: Set the input box auxiliary information, located below the input box.
(4) errorText: Set the error message when the content in the input box is input incorrectly.
(5) hintText: Set the prompt information in the input box. This attribute can be used in conjunction with the hintStyle attribute. The intStyle attribute is used to set the text style of the prompt information in the input box, and its attribute value is of type TextStyle.
decoration: InputDecoration(
icon: Icon(Icons.person),
labelText: '用户名',
labelStyle: TextStyle(color: Colors.black),
helperText: '用户名只能由字母和数字组成',
helperStyle: TextStyle(color: Colors.grey),
errorText: '用户名格式错误',
errorStyle: TextStyle(color:Colors.red),
hintText: '请输入用户名',
hintStyle: TextStyle(color: Colors.black12)
),
(6) prefixlcon: Set the front icon in the input box. The usage method is the same as the icon attribute, but the icon is located on the right side of the icon set by the icon attribute.
(7) prefixText: Set the pre-text in the input box. This property can be used in conjunction with the prefixStyle property. The prefixStyle property is used to set the pre-text style in the input box. Its property value is of type TextStyle.
(8) suffixlcon: Set the rear icon in the input box. The usage method is the same as the icon attribute, but the icon is located on the right side of the input box.
(9) suffixText: Set the post text in the input box. This property can be used in conjunction with the suffixStyle property. The prefixStyle property is used to set the text style behind the input box. Its property value is of type TextStyle.
(10) counterText: Set the text displayed at the bottom right of the input box. It is often used to display the number of characters entered. This property can be used in conjunction with the counterStyle property. The counterStyle property is used to set the text style at the bottom right of the input box. Its property value It is of type TextStyle.
(11) counter: Set the Widget widget at the bottom right of the input box, but cannot be used with counterText at the same time.
(12) filled: Set the background color of the filled input box, if its value is true, use the fllColor attribute to specify The color is used as the background color of the input box. The fllColor property is used to set the background color of the input box, and its property value type is Color type.
TextField(
maxLength: 13,
maxLengthEnforced: false,
maxLines: 1,
// obscureText: true,
enableInteractiveSelection: false,
textCapitalization: TextCapitalization.words,
// keyboardType:TextInputType.emailAddress// 设置输入内容时软键盘的类型
decoration: InputDecoration(
icon: Icon(Icons.ad_units_rounded,color: Colors.grey ,),
labelText: '手机号',
labelStyle: TextStyle(color: Colors.black),
hintText: '请输入用户手机号码',
hintStyle: TextStyle(color: Colors.black12),
prefixText: '086',
prefixStyle: TextStyle(color: Colors.black),
prefixIcon: Icon(Icons.phone,color: Colors.blue,),
suffixText: '中国',
suffixIcon: Icon(Icons.flag,color: Colors.grey),
counterText: '输入13位手机号码',
counterStyle: TextStyle(color: Colors.grey),
// counter: Text('输入13位手机号码')
filled: true,
fillColor: Colors.orangeAccent
),
),
InputDecoration controls the input
Common properties of the outer border style of the box.
The default style of the outer border is a gray
(1) border: Set the border line of the input box. There is a border by default. When the input box does not have the focus, the outer border is gray; when the input box has the focus, the outer border is the theme color.
The value of this property can be:
border:InputBorder.none, set the input box without border;
border: OutlineInputBorder(), set the border line style of the input box;
set the style of the outer border:
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(30))//边角为30的方框
)
UnderlineInputBorder, set the bottom border line style of the input box,
(2) enabledBorder: set the border line color, corner radian, etc. of the input box in the available state. The value of this property is the same as the border property.
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(60)), //边角为30的方框
borderSide: BorderSide(color: Colors.red,width:10)//设置边框线的颜色和粗细
)
(3) focusedBorder:
Set the color of the border line, corner radian, etc. of the input box when the focus is obtained. The usage method is the same as the enabledBorder property.
focusedBorder:OutlineInputBorder()
Before
Click After Click Enter
Full code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class denglupage extends StatelessWidget {
InputDecoration inputDecoration = InputDecoration(
icon: Icon(
Icons.ad_units_rounded,
color: Colors.grey,
),
labelText: '手机号',
labelStyle: TextStyle(color: Colors.black),
hintText: '请输入用户手机号码',
hintStyle: TextStyle(color: Colors.black12),
prefixText: '086',
prefixStyle: TextStyle(color: Colors.black),
prefixIcon: Icon(
Icons.phone,
color: Colors.blue,
),
suffixText: '中国',
suffixIcon: Icon(Icons.flag, color: Colors.grey),
counterText: '输入13位手机号码',
counterStyle: TextStyle(color: Colors.grey),
// counter: Text('输入13位手机号码')
filled: true, //设置填充输人框的背景色，
// fillColor: Colors.orangeAccent
// border: UnderlineInputBorder( )
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(60)), //边角为30的方框
borderSide: BorderSide(color: Colors.red,width:10)//设置边框线的颜色和粗细
),
focusedBorder:OutlineInputBorder()
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('有请甄学者登录'),
titleTextStyle: TextStyle(color: Colors.yellow),
backgroundColor: Colors.black87,
),
body: Column(children: <Widget>[
TextField(
maxLength: 8,
maxLengthEnforced: false,
maxLines: 1,
// obscureText: true,
enableInteractiveSelection: false,
textCapitalization: TextCapitalization.words,
// keyboardType:TextInputType.emailAddress// 设置输入内容时软键盘的类型
decoration: InputDecoration(
icon: Icon(Icons.person),
labelText: '用户名',
labelStyle: TextStyle(color: Colors.black),
helperText: '用户名只能由字母和数字组成',
helperStyle: TextStyle(color: Colors.grey),
errorText: '用户名格式错误',
errorStyle: TextStyle(color: Colors.red),
hintText: '请输入用户名',
hintStyle: TextStyle(color: Colors.black12)),
),
TextField(
maxLength: 13,
maxLengthEnforced: false,
maxLines: 1,
// obscureText: true,
enableInteractiveSelection: false,
textCapitalization: TextCapitalization.words,
// keyboardType:TextInputType.emailAddress// 设置输入内容时软键盘的类型
decoration: inputDecoration,
),
]
// TextField delegate method
));
// theme:ThemeData(primaryColor: Colors.black38)));
}
}