CODEWITHSUNDEEP
flutterdartflutter-layout
Amit
Amit

Reputation: 536

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

Upvotes: 4

Views: 3586

Answers (3)

R2T8
R2T8

Reputation: 2590

Use IntrinsicHeight and CrossAxisAlignment.stretch.

See here:

return IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Expanded(
        flex: 2,
        child: TextFormField(...),
      ),
      const SizedBox(width: 12),
      Expanded(
        child: TextFormField(...),
      ),
    ],
  ),
);

Upvotes: 0

Avnish Nishad
Avnish Nishad

Reputation: 1852

I am late to help you but I am writing this solution in the hope that others will be benefited.

case 1: when the text field having error goes a up in row. In this case we can set crossAxisAlignment.

crossAxisAlignment: CrossAxisAlignment.start

case 2: If you want to show the whole validation message to the user then you can provide errorMaxLines under decoration in TextFormField.

TextFormField(
decoration: InputDecoration(
    errorMaxLines: 4),)

Case 3: you should align the two text field like this (Use Expanded instead of Flexible and also remove mainAxisAlignment: MainAxisAlignment.spaceBetween because spaceBetween will divide the width in 3 equal part and SizedBox will have same width as a textfield in that row).

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    new Expanded(
      child: Padding(
        padding: const EdgeInsets.all(0.0),
        child: firstName,
      ),
    ),
    SizedBox(width: 48.0),
    new Expanded(
      child: Padding(
        padding: const EdgeInsets.all(0.0),
        child: lastName,
      ),
    ),
  ],
)

Upvotes: 2

siega
siega

Reputation: 2868

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.

Upvotes: 7

Related Questions