Blank Space at the bottom when textfield is onFocus in SingleChildScrollView

Question

I created several textfield as input on this demo and make it scrollable using SingleChildScrollView and all the content can be scrollable. But, extra blank space appears on the bottom when the text field is focused. Especially, when the device keypad shows. The below code is for demo purposes only

class AddItemFromImage extends StatefulWidget {
  const AddItemFromImage({Key? key}) : super(key: key);

  @override
  State<AddItemFromImage> createState() => _AddItemFromImageState();
}

class _AddItemFromImageState extends State<AddItemFromImage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Testing TextField"),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: SingleChildScrollView(
          child: Column(
            children: [
              TextField(),
              TextField(),
              TextField(),
              TextField(),
              TextField(),
              TextField(),
              TextField(),
              TextField(),
              TextField(),
            ],
          ),
        ),
      ),
    );
  }

Answer 1

Whenever a keyboard is shown on screen, on default Scaffold will only use the screen space which is above the keyboard popup. (When the keyboard appears, the Flutter widgets resize. How to prevent this?). Your white space can get pushed upwards when keyboard is shown. (depending on the circumstances). To prevent this you could change the Scaffold properties of resizeToAcoidBottomInset to false.

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