Флаттер, как изменить границы TextField после определенного условия - PullRequest
Новая
       51

Флаттер, как изменить границы TextField после определенного условия

0 голосов
/ 12 апреля 2020

, поэтому я пытаюсь создать форму регистрации, где есть текстовые поля. Что я хочу сделать, так это то, что если кнопка SignUp нажата и в ней есть пустые поля, то граница TextField должна измениться с зеленого на красный, а также поставить TextHint с надписью «Это поле пусто»

Я мог видеть только TextEditingController, который контролирует только текстовую часть TextField.

Итак, как изменить границу TextField ПОСЛЕ произнесения события? 

TextField(
  controller: _name,
  decoration: InputDecoration(
    labelText: ' NAME ',
    labelStyle: TextStyle(
      fontFamily: 'Montserrat',
      fontWeight: FontWeight.bold,
      color: Colors.grey),
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.green),
    ),
  ),
),

Я хочу, чтобы зеленый был красным, если поле пусто после нажатия кнопки

Ответы [ 2 ]

1 голос
/ 12 апреля 2020

Для свойства borderDecoration я превратил его в переменную, чтобы впоследствии я мог использовать его с синтаксисом троичного оператора для предоставления (логического) красного подчеркивания, если оно пустое или нет. Я использовал свойство 'enabledBorder', чтобы изменить подчеркивание на красный. Затем я создал переменную для «TextHint», если она пуста как «errorText», которая будет отображаться под текстовым полем, или будет пустой, если на входе есть текст.

Чтобы сделать это модульным, на самом деле вы можете поместить var 'borderDecoration' в другую папку и просто импортировать его здесь. 

 final _name = TextEditingController();
      final borderDecoration = InputDecoration(
        labelText: ' NAME ',
        labelStyle: TextStyle(
            fontFamily: 'Montserrat',
            fontWeight: FontWeight.bold,
            color: Colors.grey),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.green),
        ),
      );
      String errorText = '';
      bool redUnderLine = false;

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("title"),
          ),
          body: Column(children: <Widget>[
            SizedBox(height: 20.0),
            TextField(
                controller: _name,
                decoration: redUnderLine
                    ? borderDecoration.copyWith(
                        enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.red)),
                      )
                    : borderDecoration),
            Text(errorText, style: TextStyle(color: Colors.red)),
            SizedBox(height: 20.0),
            RaisedButton(
                onPressed: () {
                  if (_name.value.text.isEmpty) {
                    setState(() => redUnderLine = true);
                    setState(() => errorText = "This field is empty");
                  } else {
                    setState(() => redUnderLine = false);
                    setState(() => errorText = "");
                  }
                },
                child: Text("SignUp"))
          ]),
        );
      }
1 голос
/ 12 апреля 2020

Для этого вы должны использовать отдельную переменную bool. Вы устанавливаете для bool значение true, если данные не заполнены, и тогда будет отображаться ошибка.

Следующий полный код может помочь вам больше. 

 TextEditingController _name = TextEditingController();
  bool _validateName = false;
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _name,
              decoration: InputDecoration(
                labelText: ' NAME ',
                errorText: _validateName ? "please enter name" : null,
                labelStyle: TextStyle(
                  fontFamily: 'Montserrat',
                  fontWeight: FontWeight.bold,
                  color: Colors.grey,
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.green),
                ),
              ),
            ),
            RaisedButton(
              child: Text("submit"),
              onPressed: () {
                setState(() {
                  _name.value.text.isEmpty
                      ? _validateName = true
                      : _validateName = false;
                });
              },
            )
          ],
        ),
      ),
    );
  }
...