Search code examples
flutterdartflutter-layout

Flutter : two Textformfield in row have problem


This is the image of issue

i m facing issue in flutter design i have two textformfield in a row when i set error on one textformfield it moves slightly upward or shrink to make space for error text

in android native this issue is not there

please if any one can help me

i have tried many solutions like setting container height 100 and place row in that and set aligment center but no solution found

   final firstName = new TextFormField(
    decoration: InputDecoration(
   //          border: OutlineInputBorder(),
      labelText: _APP_FIRSTNAME_LBL,
      contentPadding:
          EdgeInsets.only(left: 0.0, top: 8.0, right: 0.0, bottom: 8.0)),
  validator: validateName,
  onSaved: (String val) {
    _mFirstName = val;
  },
);

 final lastName = new TextFormField(
    decoration: InputDecoration(
 //            border: OutlineInputBorder(),
        labelText: _APP_LASTNAME_LBL,
        contentPadding:
            EdgeInsets.only(left: 0.0, top: 8.0, right: 0.0, bottom: 
 8.0)),
    //obscureText: true,
    validator: validateName,
    onSaved: (String val) {
      _mLastName = val;
    });

  final rowFirstLastName = new Container(
    alignment: Alignment.center,
    height: 80,
    child: new Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        new Flexible(
          child: Padding(
            padding: const EdgeInsets.all(0.0),
            child: firstName,
          ),
        ),
        SizedBox(width: 48.0),
        new Flexible(
          child: Padding(
            padding: const EdgeInsets.all(0.0),
            child: lastName,
          ),
        ),
      ],
    ));

both textformfield should remain in the same alignment if error or not set on fields


Solution

  • Try to add an empty helperText to your TextFormField. It will reserve a space under the input and, when an error is shown, your input will not change size.