CODEWITHSUNDEEP
flutterdart
Karel Debedts
Karel Debedts

Reputation: 5758

Flutter: keyboard automatically shows up

I'm navigating to the next page within my Flutter app.

On the next page there are a few Forms where a user can enter text.

final _form2Key = GlobalKey<FormState>();

Padding(
  padding: EdgeInsets.only(top: 8.0),
  child: Container(
    width: screenWidth / 1.1,
    height: screenHeight / 5.5,
    child: Form(
      key: _form2Key,
      autovalidate: true,
      child: TextFormField(
        autofocus: true,
        validator: (val) {
          if (val.trim().length < 3 || val.isEmpty) {
            return "Too short";
          } else if (val.trim().length > 200) {
            return "Too long";
          } else {
            return null;
          }
        },
      onSaved: (val) => description = val,
      decoration: InputDecoration(
        border: OutlineInputBorder(),
        filled: true,
        fillColor: Colors.white,
        labelText: "",
        labelStyle: TextStyle(fontSize: 15.0),
        hintText: " ",
      ),
    ),
  ),
),

Everything 'works', but after navigating to this new page, the keyboard shows up automatically and is focussed on the textfield.

Is it possible to avoid the keyboard popping up and only show the keyboard when the user presses the form?

Thanks in advance!

Upvotes: 2

Views: 2845

Answers (1)

dlohani
dlohani

Reputation: 2591

your keyboard is automatically popping up because you have set autofocus to true, please modify to false or remove that property to avoid keyboard from automatically popping up

final _form2Key = GlobalKey<FormState>();

Padding(
  padding: EdgeInsets.only(top: 8.0),
  child: Container(
    width: screenWidth / 1.1,
    height: screenHeight / 5.5,
    child: Form(
      key: _form2Key,
      autovalidate: true,
      child: TextFormField(
        autofocus: false, // modified
        validator: (val) {
          if (val.trim().length < 3 || val.isEmpty) {
            return "Too short";
          } else if (val.trim().length > 200) {
            return "Too long";
          } else {
            return null;
          }
        },
        onSaved: (val) => description = val,
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          filled: true,
          fillColor: Colors.white,
          labelText: "",
          labelStyle: TextStyle(fontSize: 15.0),
          hintText: " ",
        ),
      ),
    ),
  ),
),

Upvotes: 5

Related Questions