自定义 InputTextField 的验证器

Question

我已经创建了自己的自定义文本输入字段，一切正常，但问题是如何在单击按钮时为其提供验证器？

这是我的自定义输入框，

class CustomInputField extends StatelessWidget {

  bool _validate = false;

  Icon fieldIcon;
  String hintText;
  TextInputType textType;

  CustomInputField(this.fieldIcon, this.hintText, this.textType);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      child: Material(
          elevation: 5.0,
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          color: Colors.deepOrange,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: fieldIcon,
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(topRight: Radius.circular(10.0), bottomRight: Radius.circular(10.0)),
                ),
                width: 250,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                    controller: _text,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: hintText,
                      fillColor: Colors.white,
                      errorText: _validate? 'Value can\'t be empty' : null,
                      filled: true,
                    ),
                    keyboardType: textType,
                    style: TextStyle(
                      fontSize: 15.0,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
            ],
          )

      ),
    );
  }
}

这就是我在不同页面中的调用方式

CustomInputField(
                    Icon(
                      Icons.lock,
                      color: Colors.white,
                    ),
                    'Password',
                    TextInputType.visiblePassword),

所以如果文本字段为空，单击按钮时，我需要输入 errorText，所以有人可以帮我吗？

Answer 1

你需要做几件事。

1. 为 Stateful Widget 创建一个 GlobalKey 类型的 FormState。

    GlobalKey<FormState> _formKey = GlobalKey<FormState>();

1. 使用验证器和 onSave 回调创建一个 TextFormField。

    Form(
      key: _formKey, //Give you form it's key.
      child: Column(
        children: <Widget>[
          TextFormField(
            validator: (input) {
              if (input.isEmpty) { //Here I check if the field data is empty.
                return "Field cannot be empty.;
              }
            },
            //Update what ever variable you want with the validated data.
            //Here I picked a variable named foo.
            onSaved: (input) => foo = input,
        ],
      ),
    ),

1. 制作一个按钮，使用 _formKey 调用验证函数和保存函数。

    RaisedButton(
      child: Text("Do Something"),
      onPressed: () {
        //Validate will run on the TextFormField and return the error provided.
        if (_formKey.currentState.validate()) {
          _formKey.currentState.save(); //If validated, we will update our foo variable.
        }
      },
    ),