When Flutter was first developed, one of the most common problems encountered with Flutter was that the keyboard popped up, causing height abnormalities.

At present, there are two solutions, but each has its own advantages and disadvantages

Plan a

Use SingleChildScrollView for the outermost solution (most answers when searching for solutions)

SingleChildScrollView( child: Container( child: TextFormField( controller: _emailController, focusNode: _emailFocusNode, keyboardType: TextInputType.emailAddress, validator: validateEmail, style: const TextStyle(color: Colors.white, fontSize: 14), cursorColor: Colors.white, onSaved: (v) { _email = v! ; },),),),Copy the code

Disadvantages of this method:

  1. If you use Stack to add a background image, pop-up/hide the background flash screen will appear momentarily
  2. Interface elements can slide up and down with less than the entire interface
  3. Component layer nesting, complex interface will exist a variety of problems

Scope of application: 1, do not use the background picture interface

Currently I am still looking for a solution to this problem, and I have a preliminary idea: monitor the height of the keyboard rise, and then make the whole interface rise synchronously. Updates will be shared after successful practice

Scheme 2

Use this property of Scaffold resizeToAvoidBottomInset: flase (early version resizeToAvoidBottomPadding) as perfect solve the pop-up keyboard height anomaly. There is no background flash screen after using the background image

Scaffold( resizeToAvoidBottomInset: false, body: Container( child: TextFormField( controller: _emailController, focusNode: _emailFocusNode, keyboardType: TextInputType.emailAddress, validator: validateEmail, style: const TextStyle(color: Colors.white, fontSize: 14), cursorColor: Colors.white, onSaved: (v) { _email = v! ; },),),),Copy the code

Disadvantages of this method:

  1. If the position of the input box is lower than the maximum pop-up height of the keyboard, the input box will be covered

Scope of application:

  1. Use the background image interface
  2. The input box is higher than the maximum pop-up height of the keyboard