White Box Obscures View When Keyboard Appears

Question

For some reason after updating flutter, one of the sections of my app has been broken. I have a list of text form widgets set in a SingleChildScrollView. Whenever I press one of the text forms, the keyboard appears and an empty white box pushes itself up into the field of view, obscuring the text entry boxes.

After having some trouble with text entry in a list view before I followed the advice of this link: https://www.didierboelens.com/2018/04/hint-4-ensure-a-textfield-or-textformfield-is-visible-in-the-viewport-when-has-the-focus/

It effectively solved the problems I had beforehand where the text entry boxes were not remaining visible when the keyboard appears. But now the while box is appearing and obscuring the view. I also made sure to use:

resizeToAvoidBottomPadding: false

as is regularly advised.

Here is the code in question with one of the text field widget's code too:

  @override
Widget build(BuildContext context) {

return new Scaffold(

  body: new SafeArea(
      child: new Form(

          key: _formKey,

          child: new SingleChildScrollView(

            padding: const EdgeInsets.all(16.0),

            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,

              children: <Widget>[

                circumstances(),
                divider(),
                description(),
                divider(),
                externalHappenings(),
                divider(),
                internalHappenings(),
                divider(),
                reflectionsAndCorrections(),
                divider(),
                abatement(),
                divider(),
                footerButtons()

              ],

            ),

          )

      )
  ),

  resizeToAvoidBottomPadding: false,
);

}

Widget circumstances() {

  return new EnsureVisibleWhenFocused(
  focusNode: _focusNodeCircumstances,
  child: new TextFormField(

    controller: _circumstancesController,
    maxLines: maxLines,

    decoration: const InputDecoration(
      border: const OutlineInputBorder(
          borderRadius: const BorderRadius.all(const Radius.circular(0.0)),
          borderSide: const BorderSide(color: Colors.black, width: 1.0)
      ),

      filled: true,

      labelText: "Circumstances",
      hintText: "Who was there? Where were you?",
    ),

    autofocus: true,

    validator: (value) {

      _activeJournalEntry.setCircumstances(value);

      if(value == null || value.isEmpty) {
        return "Please enter some circumstances.";
      }

    },

    focusNode: _focusNodeCircumstances,

  ),
);

}

Answer 1

该帖子的回复为我指明了解决问题的正确方向。

我有三个深嵌套的脚手架，其中最里面的两个有这组：

resizeToAvoidBottomPadding: false

然而，我最外面的脚手架没有，导致了这个问题。因此，事实证明，嵌套支架是可以的，但您必须确保每个支架都设置了该属性以避免出现此问题。

也可以看看，

https://github.com/flutter/flutter/issues/7036