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!
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
You can use SingleChildScrollView Widget.
You can use SingleChildScrollView and wrap it with a Container widget and provide a certain height to it.
Related
I'm using the "drag_and_drop_lists" plugin to move around ListTile items in a column in a Flutter app (latest version of Flutter) on Android. My problem: ListTile items with a long subtitle value get clipped in height. In the example below, there's text in a line below after "key from & drop off" that I can't see:
The widget on this screen is a DragAndDropLists. "1", "2", and "3" are the DragAndDropList in it.
Here's what the ListTile looks like - it has a height of 184 pixels:
The plugin wraps my ListTile in a number of widgets. The last one with a height of 184 pixels is the column:
That Column is in a SingleChildScrollView. And that's the first one with the wrong height — 145 pixels:
Here's the line in the source code creating that SingleChildScrollView. If I remove the physics: NeverScrollableScrollPhysics() attribute there, I can scroll my ListTile. Here, the title is now missing, but the whole subtitle is then visible:
I don't know how to get the SingleChildScrollView to show my Column at full height. I tried a number of things but nothing worked. I didn't file a GitHub issue with the plugin, as the plugin author hasn't responded to an issue for quite a while.
I couldn't fix this with a regular ListTile. So instead, I now show a separate Text widget with the text. And that doesn't get clipped.
I have a Row with some Containers in it, this causes an overflowed on the right.
How can I make that once a container has overflowed, the next ones go in a new line
I hope I was clear and that someone can answer me.
Thank you :)
Instead of using a Row() widget you need to use a Wrap() widget and make sure to have your Container()'s width not overflowed.
Wrap() widget just do according to what you need right now, it arranges its children in horizontal direction(by default - you can change it though) and if any child overflowed then move that child in new line.
I am trying to make a row of widgets with a small text below them mentioning what that button is for. One of the label is supposed to be multi lined but this is affecting the button in the column. How can I align them properly without it affecting the buttons placed?
My Widget Structure is something like this:
Column -> Row -> Column -> GestureDetector, Text
Try to add crossAxisAlignment: CrossAxisAlignment.start at the Row containing all the widgets.
If that doesn't work, post all of the widget parent's code
As you know, the ListTile comes packaged with 4 widgets:
a) title:
b) subtitle:
c) leading: can be an icon or text I suppose
d) trailing: can be an icon or text I suppose
But I want to add a 5th:
e) chipSection: [which accepts a row of chips]
Can someone advise me on how I can establish this? What do you recommend??
Thanks
Well you can't add 5th option directly without changing source code which I wouldn't recommend.
There are few options:
Use a Column and make ListTile and ChipSection it's children. Tho in this case you have to add elevation to ChipSection.
Make a Custom Widget say myListTile, add arguments for title, leading, subtitle,trailing and chip Section.
Inside Custom widget return a Card Widget, add Column as its child, and then add:
Icon/Test widget for leading,
Text widget for Title
Another Text Widget for subtitle
Icon/Test Widget for Trailing
Your chip section
as columns, children.
Use Padding + Column's mainaxisaligment property to manage their alignment.
What is the difference between Expanded and Spacer in Flutter? Why Flutter team added Spacer when we already have Expanded?
Both Spacer and Expanded does the same job that is they fill up the remaining space in a widget like Row or Column. Before Spacer, we had to use
Expanded(child: Container())
And which is not very good. With Spacer we only have to use
Spacer()
So, using Spacer, we prevent us from writing more code and it also gives clear indication that we are just using it to fill up the remaining space. Both of them have same property of flex which defaults to 1. The only difference is we don't have child property which makes sense. In fact Spacer is
Expanded(child: SizedBox.shrink());
TL;DR
Spacer()
is equivalent to
Expanded(child: Container())
Expanded makes its child widget occupy space.
Spacer occupies space by itself.
If you look at the implementation of Spacer, you'll see that it's a wrapper around Expanded with a dummy child.
Is Spacer really necessary? Probably not. In an alternate universe, Expanded could have had an optional child argument instead.