How to make a Form scrollable in Flutter

Question

So I'm trying to make an app where I have the user fill out a couple form fields and process the information when the user submits the form. My problem is that I can't seem to find out how to make the Form scrollable (because it's long and causes a RenderFlex error). Any scrollable widget I wrap it with still causes a RenderFlex error. The only time it scrolls is when I wrap it with a ListView but it too, causes a RenderFlex error and worst of all, for some reason scrolls back to normal when I try to scroll to the bottom to hit the button to submit. I've already tried most of the solutions in How to scroll page in flutter and Flutter - How to make a column screen scrollable, but none of them seem to work. Here's how the form is structured:

- Form
  - Column (List of input fields, crossAxisAlignment = CrossAxisAlignment.start)
   - Padding (Input field, top padding of 12)
    - Column (Text + input field)
     - Align (alignment = Alignment.centerLeft)
      - Padding (Left padding 8)
       - Text (Field title)
     - Padding (Symmetric horizontal padding of 8)
      - TextFormField (Text input)
   - Seven more input fields with the same structure (Padding > Column > Align > ...)
   - Padding (Vertical padding of 64)
    - Align (center alignment)
     - FractionallySizedBox (for 75% width)
      - SizedBox (for fixed height)
       - ElevatedButton (Submit button)
        - Text (Submit button text)

I hope this is enough information and I'd really appreciate if anyone could help me out with making this form scrollable. Thanks in advance!

Answer 1

The problem is when you use Column without specifying the height it considers the height to be infinite. Try to wrap the first column widget with SizedBox and make use of MediaQuery to determine the screen height and set it as the height parameter for SizedBox.

Now, wrap the Column with a SingleChildScrollView to make it scrollable.

For Example,

SizedBox(
  height: MediaQuery.of(context).size.height,
  child: SingleChildScrollView(
     child: Column(...),
  ),
),

Lastly, why do you need a second Column for text and input field? Can't you just use the InputDecoration method from TextField() and use the labelText or HelperText