当按下按钮时 TextFormField 出现错误时，小部件向下移动

Question

I have created a login page in Flutter. I have used SingleChildScrollView to make this page scrollable. I have used the form validation to validate the username and password text form fields. The problem is when error messages displayed below TextFormField , the login button is shifted down.

I have also used ListView to enable the scrolling but the behavior is the same as far as shifting is concerned.

I am new to Flutter and seeking help in this. I am providing the code and screenshot below.

Thank you.

Screenshot

Login Page

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'login_form.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(child: LoginForm()),
    );
  }
}

Login Form

import 'package:flutter/material.dart';

class LoginForm extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _LoginFormState();
  }
}

class _LoginFormState extends State<LoginForm> {
  TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);
  OutlineInputBorder textFieldBorder = OutlineInputBorder(
      borderRadius: BorderRadius.circular(32.0),
      borderSide: BorderSide(color: const Color(0xff01d277)));

  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    /// Username field
    final usernameField = TextFormField(
    obscureText: false,
    style: style,
    validator: (value) {
      if (value.isEmpty) return 'Please enter username';
      return null;
    },
    decoration: InputDecoration(
      contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
      hintText: 'Username',
      border: textFieldBorder,
    ));

/// Password field
final passwordField = TextFormField(
    obscureText: true,
    style: style,
    validator: (value) {
      if (value.isEmpty) return 'Please enter password';
      return null;
    },
    decoration: InputDecoration(
      contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
      hintText: 'Password',
      border: textFieldBorder,
    ));

/// Login button
final loginButton = Material(
  elevation: 5.0,
  borderRadius: BorderRadius.circular(30.0),
  color: Color(0xff01d277),
  child: MaterialButton(
    minWidth: MediaQuery.of(context).size.width,
    padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
    onPressed: () {
      if (formKey.currentState.validate())
        Scaffold.of(context).showSnackBar(SnackBar(content: Text('Done!')));
    },
    child: Text("Login",
        textAlign: TextAlign.center,
        style: style.copyWith(
            color: Colors.white, fontWeight: FontWeight.bold)),
  ),
);

return Padding(
    padding: const EdgeInsets.all(36.0),
    child: Form(
        key: formKey,
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 150,
              child: Image.asset(
                'lib/assets/images/logo_dark.png',
                fit: BoxFit.contain,
              ),
            ),
            SizedBox(height: 45.0),
            usernameField,
            SizedBox(
              height: 45.0,
            ),
            passwordField,
            SizedBox(
              height: 45.0,
            ),
            loginButton,
          ],
        )));
  }
}

Answer 1

Use ConstrainedBox with fixed maxHeight and minHeight

ConstrainedBox(
   constraints: BoxConstraints(
      maxHeight: 70.0,
      minHeight: 70.0,
   child: TextFormField(...),
  ),
);

Answer 2

Use 'Container' widget to set full height.

Container(
          width: double.infinity,
          height: 73, //(text field height + error label height)
          child: TextFormField(<your Text Form Field>)
          )

Answer 3

Try wrapping the usernameField and passwordField in an Expanded widget

            Expanded(child: usernameField),
            SizedBox(
              height: 45.0,
            ),
            Expanded(child: passwordField),