Implementation code of textfield component of fluent input box

TextField

As the name suggests, the text input box is similar to uitextfield in IOS, EditText in Android and textinput in the web. It mainly provides convenience for users to input text. I believe everyone has used this function on the native client, so we won't introduce it in detail. Next, let's introduce the usage of textfield in fluent in detail.

The following has been updated to GitHub

Construction method of textfield:

const TextField({
  Key key,this.controller,//控制器，控制TextField文字
  this.focusNode,this.decoration: const InputDecoration(),//输入器装饰
  TextInputType keyboardType: TextInputType.text,//输入的类型
  this.style,this.textAlign: TextAlign.start,this.autofocus: false,this.obscureText: false,//是否隐藏输入
  this.autocorrect: true,this.maxLines: 1,this.maxLength,this.maxLengthEnforced: true,this.onChanged,//文字改变触发
  this.onSubmitted,//文字提交触发（键盘按键）
  this.onEditingComplete,//当用户提交可编辑内容时调用
  this.inputFormatters,this.enabled,this.cursorWidth = 2.0,this.cursorRadius,this.cursorColor,this.keyboardAppearance,})

Let's try the most basic textfield:

/*
 * Created by 李卓原 on 2018/9/7.
 * email: zhuoyuan93@gmail.com
 *
 */

import 'package:Flutter/material.dart';

class TextFieldAndCheckPage extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => TextFieldAndCheckPageState();
}

class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {
 @override
 Widget build(BuildContext context) {
  return Scaffold(appBar: AppBar(
   title: Text('输入和选择'),),body:TextField(),);
 }
}

This is a default input box that looks like when we don't do anything

Then let's try its properties

TextField(
    keyboardType: TextInputType.number,decoration: InputDecoration(
     contentPadding: EdgeInsets.all(10.0),icon: Icon(Icons.text_fields),labelText: '请输入你的姓名)',helperText: '请输入你的真实姓名',onChanged: _textFieldChanged,autofocus: false,void _textFieldChanged(String str) {
  print(str);
 }

We add a keyboardtype attribute and set the keyboardtype to textinputtype. Number

You can see that every time we let textfield get the focus, the pop-up keyboard becomes number first.

Then we do some other effects for the input box, such as prompt text, icon, label text, etc.

We added the decoration attribute to the above code and set the relevant attributes. It can be found that when our textfield gets the focus, the icon will automatically change color and the prompt text will automatically move up.

You can also see that I added an onchanged.

Onchanged is the callback triggered by each text change in the input box, and onsubmitted is the callback triggered by user submission.

Whenever the user changes the text in the input box, the current string will be output on the console. The usage is the same as onsubmitted

Next, we implement a simple login page:

/*
 * Created by 李卓原 on 2018/9/7.
 * email: zhuoyuan93@gmail.com
 *
 */

import 'package:Flutter/cupertino.dart';
import 'package:Flutter/material.dart';

class TextFieldAndCheckPage extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => TextFieldAndCheckPageState();
}

class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {
 //手机号的控制器
 TextEditingController phoneController = TextEditingController();

 //密码的控制器
 TextEditingController passController = TextEditingController();

 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text('输入和选择'),body: Column(
    children: <Widget>[
     TextField(
      controller: phoneController,keyboardType: TextInputType.number,decoration: InputDecoration(
       contentPadding: EdgeInsets.all(10.0),icon: Icon(Icons.phone),labelText: '请输入你的用户名)',helperText: '请输入注册的手机号',TextField(
       controller: passController,decoration: InputDecoration(
        contentPadding: EdgeInsets.all(10.0),icon: Icon(Icons.lock),labelText: '请输入密码)',obscureText: true),RaisedButton(
      onPressed: _login,child: Text('登录'),],);
 }

 void _login() {
  print({'phone': phoneController.text,'password': passController.text});
  if (phoneController.text.length != 11) {
   showDialog(
     context: context,builder: (context) => AlertDialog(
        title: Text('手机号码格式不对'),));
  } else if (passController.text.length == 0) {
   showDialog(
     context: context,builder: (context) => AlertDialog(
        title: Text('请填写密码'),));
  } else {
   showDialog(
     context: context,builder: (context) => AlertDialog(
        title: Text('登录成功'),));
   phoneController.clear();
  }
 }

 void onTextClear() {
  setState(() {
   phoneController.clear();
   passController.clear();
  });
 }
}

In the layout, we use a column containing two textfields and a raisedbutton.

Logically, every time we click the button below, we will judge whether the user name and password meet the requirements, and use the controller to clear the entered user name and password.

When the mobile phone number entered by the user is not 11 digits, the mobile phone number format error will be prompted,

When the user does not enter a password, he will be prompted to fill in the password,

When the user name and password meet the requirements, you will be prompted that the login is successful.

After logging in here successfully, I also called a method: phonecontroller. Clear() clears the contents in the user name input box.

The logic of the code is simple. Other uses of textfield will not be introduced one by one. Interested partners can try it by themselves

Beautify the input box with decoration

Let's see the effect first:

code:

TextField(
      controller: accountController,decoration: InputDecoration(
       border: OutlineInputBorder(),hintText: '请输入账号',labelText: '左上角',prefixIcon: Icon(Icons.person),)

As you can see, I added a decoration attribute first

Description of decoration attribute:

Switch focus within multiple input boxes

Introduce oneditingcomplete:

Called when the user submits editable content (for example, the user presses the "done" button on the keyboard).

The default implementation of oneditingcomplete performs two different behaviors according to the situation:

We sometimes need this situation. For example, on a login page, we need to enter the account and password. Naturally, after entering the account, we need to enter the password. When we finish entering the account, let the password input box get the focus

Look at the code:

...
 FocusNode secondTextFieldNode = FocusNode();
...
Column(
    children: <Widget>[
     TextField(
      /* onChanged: (text) {
     value = text;
     print(value);
    },*/
      autofocus: false,//是否自动获取焦点
      controller: _textController,decoration: InputDecoration(
       suffixIcon: Icon(Icons.chevron_right),//输入框内右侧图标
       icon: Icon(Icons.person),//输入框左侧图标
       prefixIcon: Icon(Icons.skip_prevIoUs),//输入框内左侧图标
       labelText: 'labelText',hintText: 'hintText',helperText: 'helperText',onEditingComplete: () =>
        FocusScope.of(context).requestFocus(secondTextFieldNode),TextField(
      focusNode: secondTextFieldNode,decoration: InputDecoration(
        contentPadding: EdgeInsets.symmetric(horizontal: 15.0)),

I created an AC contact at the top level and attached it to the second input box,

In the oneditingcomplete method of the first input box

FocusScope.of(context).requestFocus(secondTextFieldNode),

Method to make the second input box request focus,

Of course, you can also add a button, click the button to execute this method to realize the function of switching focus

keyboardType

TextField(
 keyboardType: TextInputType.number,

The type is:

TextInputAction

TextField(
 textInputAction: TextInputAction.search,

This will cause the finish button to be replaced by the search button:

TextCapitalization

Textcapitalization. Sentences: This is the normal type of capitalization we expect, the first letter of each sentence.

Textcapitalization.characters: capitalizes all characters in a sentence.

Textcapitalization.words: capitalize the first letter of each word.

Change cursor in textfield

You can change the cursor color, width and radius of the corner.

For example, here I have no obvious reason to make a circular red cursor.

TextField(
 cursorColor: Colors.red,cursorRadius: Radius.circular(16.0),cursorWidth: 16.0,

Controls the size and maximum length in the textfield

TextField(
 maxLength: 4,

By setting the MaxLength property, the maximum length is enforced and the counter is added to the textfield by default.

GitHub source code

The above is the whole content of this article. I hope it will help you in your study, and I hope you will support us a lot.