Flutter overflow bottom when keyboard appears

user_9040561 0
Viewed 3976

i got this error and i cant get why, in a new screen i got a simple form on top (start of the column), when i focus the textfield the keyboard appears and overflow the date select and the button, but i dont know why.

Here is the initial state whiout focus on the textfield enter image description here

and here is when i focus the textfield. enter image description here

This is the widget i got to do this.

return Scaffold(
  body: SafeArea(
      child: Column(
    children: <Widget>[
      TopBarWidget(page: 'New Event', title: 'Nuevo Evento'),
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              onChanged: (value) {
                eDisplayName = value;
              },
              maxLength: 18,
              keyboardType: TextInputType.text,
              textCapitalization: TextCapitalization.sentences,
              cursorColor: Color(0xFFFC4A1A),
              decoration: InputDecoration(
                labelText: "Nombre del Evento",
                fillColor: Colors.white,
                border: new OutlineInputBorder(
                  borderRadius: new BorderRadius.circular(5.0),
                ),
              ),
            ),
            SizedBox(
              height: 16.0,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                OutlineButton(
                  focusColor: Theme.of(context).primaryColor,
                  highlightedBorderColor: Theme.of(context).primaryColor,
                  borderSide: BorderSide(
                    color: Theme.of(context).primaryColor,
                  ),
                  textColor: Theme.of(context).primaryColor,
                  onPressed: () => _selectDate(context),
                  child: Text('Cambiar Fecha'),
                ),
                Text(
                  "${formatedDate(selectedDate.toLocal())}",
                  style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.w500,
                      color: Theme.of(context).primaryColor),
                ),
                // Text("${selectedDate.toLocal()}"),
              ],
            ),
            SizedBox(
              height: 16.0,
            ),
            RaisedButton(
              disabledColor: Colors.grey[200],
              disabledTextColor: Colors.black,
              color: Theme.of(context).primaryColor,
              textColor: Colors.white,
              shape: RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(10.0)),
              onPressed: eDisplayName.length == 0
                  ? null
                  : () {
                      // print(newEvent);
                      Navigator.pop(context);
                    },
              child: Text(
                'ACEPTAR',
                // style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
    ],
  )),
);
flutter mobile overflow android ios
2 Answers

Yo can set to false the resizeToAvoidBottomInset in your Scaffold()

Like this

return Scaffold(
  resizeToAvoidBottomInset: false,
  body: // ...
  // ...
)

Documentation reference: Scaffold - resizeToAvoidBottomInset

user_132222740

It's beginner level problem. Don't know why most tutorial don't cover this problem before showing TextField Widget.

Column widget is fixed and does not scroll. So change Column to ListView. And do nothing else. The Widget will gain scroll feature and overflow problem will not happen anymore.

user_125015400
Related