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!

Try to add your `Column` inside `SingleChildScrollView` refer my answers [here](https://stackoverflow.com/a/68646487/13997210) and [here](https://stackoverflow.com/a/69392879/13997210) hope its help to you — Ravindra S. Patil, May 31 '22 at 11:36
Like I've said in the post, `SingleChildScrollView` doesn't seem to work. — Pyzard, May 31 '22 at 11:38
As the parent of the `Column` widget. It still causes the RenderFlex issue and isn't scrollable. — Pyzard, May 31 '22 at 11:39
If `SingleChildScrollView` not work then used `Expanded` widget or `ListView` also — Ravindra S. Patil, May 31 '22 at 11:42
I've used a `Column` to stack all the different fields and then another `Column` inside the `Padding` widget to stack the input title and input field. — Pyzard, May 31 '22 at 11:43
Add all inner column in Expand Widget and Change Out side Column to ListView — Jasmin Sojitra, May 31 '22 at 11:43
Ok thanks @JasminSojitra I'll try that and let you know what happens. — Pyzard, May 31 '22 at 11:44
One question: By inner columns do you mean columns that occur in every input field? — Pyzard, May 31 '22 at 11:45
First, take the List view and Add One by one children which one has issue add in the Expanded widget — Jasmin Sojitra, May 31 '22 at 11:47
I just wrapped all the inner columns in `Expanded` widgets, and that doesn't seem to help. — Pyzard, May 31 '22 at 11:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/245201/discussion-between-pyzard-and-jasmin-sojitra). — Pyzard, May 31 '22 at 11:53

score 3 · Accepted Answer · answered May 31 '22 at 11:55

3

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 SingleScrollChildView to make it scrollable.

For Example,

SizedBox(
  height: MediaQuery.of(context).size.height,
  child: SingleScrollChildView(
     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

answered May 31 '22 at 11:55

AmateurCoder

153
10

This works! Thank you so much for the answer! I've been stuck on this problem for hours. – Pyzard May 31 '22 at 12:00
1

Also, update on the second part: I've updated the code to use `labelText` and `helperText` along with `hintText`. – Pyzard May 31 '22 at 14:56

score 0 · Answer 2 · answered May 31 '22 at 11:37

0

You can use SingleChildScrollView Widget.

answered May 31 '22 at 11:37

Mustafa Çiçek

19
3

Like I've said in the post, `SingleChildScrollView` doesn't seem to work. – Pyzard May 31 '22 at 11:38

score 0 · Answer 3 · answered May 31 '22 at 11:49

0

You can use SingleChildScrollView and wrap it with a Container widget and provide a certain height to it.

answered May 31 '22 at 11:49

Aloysius Samuel

1,004
6
11

How to make a Form scrollable in Flutter

3 Answers3