Flutter Error Message Bottom overloaded by 45 pixels

Question

I want to create a login screen using Flutter.

This is my code so far:

Future showInformationDialog(BuildContext context) {
TextEditingController name = TextEditingController();
TextEditingController deadline = TextEditingController();
return showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return AlertDialog(
        title: SingleChildScrollView(
          physics: NeverScrollableScrollPhysics(),
          child: Form(
            child: Column(
              children: <Widget>[
                TextFormField(
                  controller: name,
                  maxLength: 40,
                  textAlign: TextAlign.left,
                  keyboardType: TextInputType.text,
                  autocorrect: false,
                  decoration: InputDecoration(
                    labelText: 'Name der Klausur: ',
                    border: OutlineInputBorder(),
                  ),
                  // The validator receives the text that the user has entered.
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Gib den Namen der Klausur ein!';
                     }
                     return null;
                   },
                ),
                SizedBox(height: 20),
                TextFormField(
                  controller: deadline,
                  maxLength: 8,
                  textAlign: TextAlign.left,
                  keyboardType: TextInputType.datetime,
                  autocorrect: false,
                  decoration: InputDecoration(
                    labelText: 'Deadline: ',
                    border: OutlineInputBorder(),
                  ),
                  // The validator receives the text that the user has entered.
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Gib das Datum der Klausur ein!';
                    }
                    return null;
                  },
                ),
                SizedBox(height: 20),
                DropDownFormField(
                  titleText: 'Priorität',
                  hintText: 'Bitte auswählen',
                  value: '',
                  dataSource: [
                    {
                      "display": "Niedrig",
                      "value": "Niedrig",
                    },
                    {
                      "display": "Mittel",
                      "value": "Mittel",
                    },
                    {
                      "display": "Hoch",
                      "value": "Hoch",
                    },
                  ],
                  textField: 'display',
                  valueField: 'value',
                  ),
                SizedBox(height: 20),
              ],
            ),
          ),
        ),
        actions: <Widget>[
          FlatButton(
            onPressed: () {
              return showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    content: Text(name.text),

                  );
                }
              );
            },
            child: Text('Save'),
            color: Colors.blue,
          ),
          FlatButton(
            onPressed: () {
              return showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    content: Text(deadline.text),
                  );
                }
              );
            },
            child: Text('Save'),
            color: Colors.blue,
          ),
        ],
      );
    });
}

When the keyboard opens, it collides with the textfields -> I get an error: Bottom overflowed by 49 pixels.

What could be the issue?

I have tried everything but I got stuck here.

SingleChildScrollView or resizeToAvoidBottomPadding: false didnt help me. Maybe I don't know how to use them correctly.

For any help I would be happy.

Answer 1

Is it me, or can't I find the code for your login screen? The error is thrown because there isn't enough place for your widget on the screen. Are you using a ListView or a Column ? With a ListView you can scroll so if there isn't enough room for the content the user can scroll down to see what isn't on the screen.