Flutter - реакция текстового поля при изменении фокуса - PullRequest
Новая
       2

Flutter - реакция текстового поля при изменении фокуса

0 голосов
/ 05 мая 2020

Я создал программу, в которой пользователь может создать учетную запись, но я наложил некоторые ограничения на текстовые поля (например, для имени, оно может принимать только строку, состоящую из AZ или az).

Я хочу, чтобы под текстовым полем отображался «текст ошибки», если ввод неверен (например, если пользователь вводит «John1»), но я не знаю, как это сделать. Простым способом было бы использовать onEditingComplete , но это работает, только если пользователь нажимает на клавиатуре клавишу «Готово».

Есть ли способ сделать так, чтобы «текст ошибки» появлялся при смене фокуса с одного текстового поля на другое?

Ответы [ 2 ]

0 голосов
/ 05 мая 2020

Если вы хотите отображать текст ошибки всякий раз, когда текст / значение изменяются, вы можете это сделать.

В TextField 'onChanged' проверьте ввод пользователя с помощью некоторого регулярного выражения и проверьте наличие ошибки, если есть ошибка, используя TextField украшение 'errorText', вы можете показать требуемую ошибку. 

 Widget phoneNumberTextField() {
return Padding(
  padding: EdgeInsets.fromLTRB(25, 10, 25, 10),
  child: TextField(
    style: TextStyle(color: Colors.white),
    controller: _phoneNumberController,
    maxLength: Constants.PhoneNumberTextFieldMaxLength,
    onChanged: (value) {
      _phoneNumberErrorText =
          validatePhoneNumberTextField(_phoneNumberController.text);
      _hasPhoneNumberError = _phoneNumberErrorText.isNotEmpty;
      setState(() {});
    },
    keyboardType: TextInputType.number,
    decoration: InputDecoration(
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green, width: 1.0),
        ),
        errorText: _hasPhoneNumberError ? _phoneNumberErrorText : null),
  ),
);

} 

String validatePhoneNumberTextField(String text) {
String errorText = '';
if (text.length < 1) {
  errorText = 'Phone Number should not be empty';
} else if (text.length != 10) {
  errorText = 'Please enter valid phone number.';
}
return errorText;

}

0 голосов
/ 05 мая 2020

Для этого вы можете использовать свойство валидатора текстового поля. Рекомендуется инкапсулировать ваши поля в виджет Form(), а затем использовать виджет FormTextField() для реализации ваших проверок, это позволит отображать ошибку внизу текстового поля, если фокус изменится или будет предпринята попытка отправки .

Пример: 

TextFormField(
  onSaved: (String value) {},
  validator: (String value) {
    if (value.isEmpty) {
     return 'Please enter some text';
    }
    return null;
  },
)

Ошибка отобразится ниже красным шрифтом.

...