Два встроенных неправильных пробела TextFormField при ошибке проверки - PullRequest
0 голосов
/ 02 марта 2020

Я создал форму, в которой у меня есть два TextFormFields бок о бок, проблема в том, что когда отображается сообщение об ошибке проверки, один из TextFormField поднимается, а другой немного опускается. Как я могу сделать, чтобы исправить эту маленькую ошибку дизайна

Вот скриншот того, что я получаю

enter image description here

Вот путь Я разработал его

Row(
  children: <Widget>[
    Expanded(
      child: GestureDetector(
        onTap: () => utils.selectDate(context, _dateCtrl),
        child: AbsorbPointer(
          child: TextFormField(
            readOnly: true,
            controller: _dateCtrl,
            validator: (value) => Validate.getMsg('date', value),
            decoration: buildInputDecoration(
              false,
              'Date',
              iconData: Icons.calendar_today,
            ),
          ),
        ),
      ),
    ),
    SizedBox(width: 5),
    Expanded(
      child: GestureDetector(
        onTap: () => utils.selectTime(context, _timeCtrl),
        child: AbsorbPointer(
          child: TextFormField(
            readOnly: true,
            controller: _timeCtrl,
            validator: (value) => Validate.getDateTimeMsg(
              'time',
              value,
            ),
            decoration: buildInputDecoration(
              false,
              'Time',
              iconData: Icons.access_time,
            ),
          ),
        ),
      ),
    ),
  ],
),

Вот код для метода buildInputDecoration

InputDecoration buildInputDecoration(bool isTextArea, String hintText,
          {IconData iconData}) =>
      InputDecoration(
        contentPadding: isTextArea ? EdgeInsets.all(15.0) : null,
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.transparent),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.transparent),
        ),
        errorBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.red),
        ),
        focusedErrorBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.red),
        ),
        hintText: hintText,
        prefixIcon: isTextArea ? null : Icon(iconData),
        filled: true,
        fillColor: Colors.grey[100],
      );

1 Ответ

1 голос
/ 03 марта 2020

Все, что вам нужно сделать, это добавить CrossAxisAlignment к вашей строке, чтобы быть наверху:

...

child: Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[

...

Screenshot of result

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...