In the process of flutter development, it is essential to master the use of common flutter components. The common flutter components are basically the same as the common flutter controls used in App development, but they are used in a different way.
This post will share the use of the TextField component of flutter. This component is similar to the iOS TextField control and Android EditText control, but feels that the text input component of flutter is a little easier to use than the text input field control of the App. The common properties of the TextField component of FLUTTER and how to use them are shown below.
Let’s look at the source code of Flutter as follows:
const TextField({
Key key,
This. controller,// Edit the box’s controller
This.focusnode,// gets the focus of the keyboard
This.decoration = const InputDecoration(),// Border decoration, used to modify the appearance of the input box
TextInputType keyboardType,// Sets the type of the input keyboard
This.textinputaction,// The type of keyboard action button
This. TextCapitalization = textCapitalization. None, / / set case keyboard
This. style,// Enter the style of the text
this.strutStyle,
This.textalign = textalign.start,// The alignment of the input text
this.textAlignVertical,
This.textdirection,// The alignment direction of the input text
This. readOnly = false, // Whether it is read-only mode
ToolbarOptions toolbarOptions,
this.showCursor,
This. Autofocus = false, // Whether to autofocus
This.obscuretext = false,// Whether to hide input, eg: password format
This. Autocorrect = true,// Whether to automatically correct
this.enableSuggestions = true,
This. maxLines = 1,// Maximum number of lines
this.minLines,
this.expands = false,
This. maxLength,// The maximum number of characters allowed to be entered
This. maxLengthEnforced = true,// Whether to allow more than the input maximum length to be used together with maxLength
This.onchanged,// Callback when text content changes
This onEditingComplete, / / callback when submitting content
This.onsubmitted,// Callback when the user prompts completion
This.inputformatters,// Validation and formatting of input text
This.enabled, // Whether the input box is unclickable
This.cursorwidth = 2.0,// cursorWidth
This. cursorRadius,// Cursor circle radian
This. cursorColor,// cursorColor
The brightness of the enclosing keyboardAppearance, / / keyboard
This.scrollpadding = const edgeinsets.all (20.0),// Padding when scrolling into view
this.dragStartBehavior = DragStartBehavior.start,
Enclosing enableInteractiveSelection = true, / / long according to whether the display/cut, copy, paste menu box
This.ontap,// callback when the input box is clicked
this.buildCounter,
this.scrollController,
this.scrollPhysics,
})
The textField properties of FLUTTER are quite rich. Therefore, you should refer to these properties of flutter API carefully when using flutter. It is not necessary to master them all, but to master the common usage of flutter. This post introduces only a few common attributes, as shown below.
1. Remove the underlined background from textField.
TextField(
decoration: InputDecoration(
Border: InputBorder. None, // Remove the slide line from the input box
),
),
2. Set the textField input field to fill the background color
TextField(
decoration: InputDecoration(
FillColor: colors. white, // Set the background color
Filled: true,), // Set the filled to true
* * * *),
3. Modify the height of textField
General method:
new TextField(
decoration: InputDecoration(
ContentPadding: EdgeInsets. Only (left: 15.0, top: 5.0, Right: 5.0, Bottom: 5.0),
),
)
Universal method:
new ConstrainedBox(
constraints: BoxConstraints(
maxHeight: 20,
maxWidth: 210
* * * *),
child: new TextField(
decoration: InputDecoration(
ContentPadding: const EdgeInsets. Symmetric (vertical: 4.0),
* * * *),
* * * *),
4. Set the rounded edges of the textField
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide.none),
filled: true,
FillColor: Color(0xffaaaaaa), // Set colorless
* * * *),
),
5. Set the color of the textField prompt text
TextField(
style: TextStyle(fontSize: 20),
// Input box decoration
HintText: “Please enter your account number”,
HintStyle: TextStyle(fontSize: 15.0, color: color (0xff96A3B6)),// set the prompt TextStyle
),
),
6. Set the ICONS around the textField
TextField(
decoration: InputDecoration(
HintText: ‘Please enter your real name ‘,
hintStyle: TextStyle(
FontSize: 15.0, color: color (0xff96A3B6)), // Set the prompt text style
contentPadding: EdgeInsets.only(
Top: 5.0, bottom: 5.0),
border: InputBorder.none,
Icon: icon (Icons. Person), // Left icon
SuffixIcon: Icon(// Right Icon
Icons.remove_red_eye,
),
),
style: new TextStyle(
FontSize: ScreenUtil. Instance. SetSp (10.0),
color: Color(0xFF3D3D3D),
),
obscureText: true,
controller: _passwordTextControl,
),
The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “iOS development by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention to it!