TextField bottom overflowed when focused

Question

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

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

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()
      ],
    ),
  )
);

Answer 1

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()
                ],
              ),
            ],
          ),
        )
    );;