Center a form Without hiding fields when keyboard is open

Okay, let's break down how to keep your form fields visible when the keyboard pops up in your Flutter app. It's a common headache, but there's a neat trick.

First, you need to make sure your form can actually move.

Enable Scrolling

Wrap your form content inside a SingleChildScrollView. This widget makes your form scrollable if it gets too big for the screen, especially when the keyboard appears and takes up space.

Set the Form Size

To make sure your form takes up the full available screen height (before the keyboard shows up), put it inside a SizedBox and give it the full screen height and width. You can get these using MediaQuery.of(context).size.

Center with Flexible Space

Inside your scrollable SizedBox, use a Column.

Column Setup

• Set mainAxisSize: MainAxisSize.max to make the column take the maximum height of its parent (SizedBox).
• Use mainAxisAlignment: MainAxisAlignment.center to try and center the content vertically within the column.
• Use crossAxisAlignment: CrossAxisAlignment.stretch to make your form fields fill the width.

Adding Space

Here's the clever part for centering and keyboard handling. Add Spacer(flex: 1) widgets at the top and bottom of your list of form fields within the Column.

What Spacers Do

These Spacer widgets act like flexible empty space. They push your form fields towards the center. When the keyboard opens, the available vertical space for the column reduces. The Spacer widgets then shrink, taking up less room, allowing your form fields to stay visible and scrollable above the keyboard area.

That's it! By combining scrolling, sizing, and flexible spacing with Spacer, your form stays centered when there's room and scrolls nicely when the keyboard appears, preventing fields from being hidden.