Question 75204 in Flutter Question posted in
The official Flutter documentation can be found here.

TextField bottom overflowed when focused – Flutter

I have TextField in Flutter. It is located at the bottom of the screen, example:
enter image description here

I placed few Texts before to move it to the bottom, for this example. When I focus TextField, overflowed area appears:

enter image description here

How to get rid of this area? One option would be to display keyboard (without overflowed area) or second to display "white screen" with text field like we are used in Android (in landscape, when there is not much place).

Can somebody advise, how to get rid of this faulty behaviour? Thank you.

My code:

return Scaffold(
  key: scaffoldKey,
  body: SafeArea(
    child: Column(
      children: [
        Text("Test"),
        ...
        TextField()
      ],
    ),
  )
);
Tags:

2

Answers


  1. 0

    Try this way,

    return Scaffold(
  resizeToAvoidBottomInset: true,
  key: scaffoldKey,
  body: SafeArea(
    child: SingleChildScrollView(
      child: Column(
        children: [
          Text("Test"),
          ...
          TextField()
        ],
      ),
    ),
  ),
);
    Login or Signup to reply.
  2. 0

    Wrap your Column widget inside the ListView or SingleChildScrollView to make it scrollable when keyboard open :

    return Scaffold(
        key: scaffoldKey,
        body: SafeArea(
          child: ListView(
            padding:EdgeInsets.zero,
            children: [
              Column(
                children: [
                  Text("Test"),
                  ...
                  TextField()
                ],
              ),
            ],
          ),
        )
    );;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search