Flutter TextFormField движется вверх, когда TextHelp виден

Question

Я не понял, что происходит, но когда форма получила ошибку, текстовое сообщение помощника перемещает TextFormField. Я пытался увеличить высоту, но я не мог исправить.

Кто-нибудь знает, что происходит?

Смотрите изображение:

Следуйте коду:

Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                            alignment: Alignment.centerRight,
                            child: CountryCodePicker(
                              showFlagMain: true,
                              onChanged: print,
                              initialSelection:
                                  I18n.of(context).locale.countryCode,
                              favorite: ['+55', 'BR'],
                              showCountryOnly: false,
                              showOnlyCountryWhenClosed: false,
                              textStyle: TextStyle(
                                  color: Colors.white, fontSize: 19.0),
                              flagWidth: 40.0,
                            )),
                        Container(
                            width: 200,
                            alignment: Alignment.center,
                            child: TextFormField(
                              keyboardType: TextInputType.phone,
                              controller: _phoneTextController,
                              inputFormatters: [
                                MaskTextInputFormatter(
                                    mask: "(##) #####-####",
                                    filter: {"#": RegExp(r'[0-9]')})
                              ],
                              autocorrect: false,
                              autofocus: false,
                              style: TextStyle(
                                  color: Colors.white, fontSize: 19.3),
                              cursorColor: Colors.yellow,
                              decoration: const InputDecoration(
                                  border: InputBorder.none,
                                  hintText: '(99) 99999-9999',
                                  filled: true,
                                  hintStyle: TextStyle(color: Colors.grey)),
                              validator: (String value) =>
                                  phoneValidator(value),
                            ))
                      ],
                    ),
                    SizedBox(height: 20),
                    RaisedButton(
                      child: Text('Send'),
                      onPressed: () {
                        if (this._form.currentState.validate()) {
                          print(this._unmask(this._phoneTextController.text));
                        }
                      },
                    )
                  ],

Спасибо.

Answer 1

Вы можете изменить crossAxisAlignment ваших Row на CrossAxisAlignment.start, и виджеты TextFormField будут выровнены при отображении текста ошибки. Пример этого ниже.

          Padding(
        padding: const EdgeInsets.only(bottom: 8.0),
        child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                width: 250,
                child: TextFormField(
                  validator: (value) {
                    if (value.isEmpty) {
                      return '$firstName must not be empty.';
                    }
                    return null;
                  },
                  controller: firstNameController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: firstName,
                  ),
                ),
              ),
              Container(
                width: 250,
                child: TextFormField(
                  validator: (value) {
                    if (value.isEmpty) {
                      return '$lastName must not be empty.';
                    }
                    return null;
                  },
                  controller: lastNameController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: lastName,
                  ),
                ),
              )
            ]),
      ),

Answer 2

Попробуйте обернуть контейнер в расширенный виджет.