CODEWITHSUNDEEP
user-interfaceflutterdartscrollkeyboard
Xentrax
Xentrax

Reputation: 121

Keyboard covers TextField in Flutter

I have the problem that whenever I want to type something into my Textfield, the Keyboard covers it. I expected the screen to just scroll up whenever the keyboard appears. Any thoughts on that? I tried to set resizeToAvoidBottomInsert to true and also to wrap everything into a SingleChildScrollView().

Here is my code:

  class PhoneNrInput extends StatelessWidget {
  final TextEditingController phoneNrController = TextEditingController();
  final FocusNode phoneNrFocusNode = FocusNode();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            height: 200,
            width: double.infinity,
            decoration: BoxDecoration(
              boxShadow: [BoxShadow(color: Colors.black, blurRadius: 5)],
              color: Color(0xff05111f),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(50),
                topRight: Radius.circular(50),
              ),
            ),
            child: Padding(
              padding: EdgeInsets.all(30),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      SizedBox(
                        width: 15,
                      ),
                      Flexible(
                        fit: FlexFit.tight,
                        //Textfield
                        child: TextField(
                          focusNode: phoneNrFocusNode,
                          autofocus: false,
                          autocorrect: false,
                          keyboardType: TextInputType.phone,
                          decoration: InputDecoration(
                            filled: true,
                            hintStyle: TextStyle(
                              color: Colors.black,
                            ),
                            border: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.white),
                              borderRadius: BorderRadius.circular(25),
                            ),
                            fillColor: Colors.white,
                            hintText: "Telefonnummer",
                          ),
                          controller: phoneNrController,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 25,
                  ),
                  ButtonTheme(
                    height: 40,
                    child: RaisedButton(
                      onPressed: () {},
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(25),
                      ),
                      child: Text("Registrieren"),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Upvotes: 0

Views: 1101

Answers (1)

Xentrax
Xentrax

Reputation: 121

In case someone else has the same issue: I had included the following line in the section of the styles.xml file in the android/app/src/main/res/values folder:

<item name="android:windowFullscreen">true</item>

That caused the problem.

Upvotes: 2

Related Questions