CODEWITHSUNDEEP
flutterflutter-layout
jared-nelsen
jared-nelsen

Reputation: 1231

White Box Obscures View When Keyboard Appears

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.

enter image description here

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,

  ),
);

}

Upvotes: 2

Views: 1878

Answers (2)

bd1909
bd1909

Reputation: 265

As jared-nelsen stated, one of your Scaffold does not have the property specified. Note that this can also be caused by an external library, in my case it was the DevicePreview library.

Upvotes: 0

jared-nelsen
jared-nelsen

Reputation: 1231

The replies to this thread pointed me in the right direction to solve the issue.

I had three deep nested scaffolds where the innermost two had this set:

resizeToAvoidBottomPadding: false

However, my outermost Scaffold did not, causing this issue. So it turns out that it is fine to have nested Scaffolds but you must ensure that each of them have that property set to avoid this issue.

See also,

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

Upvotes: 5

Related Questions