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.
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 don't want to use 3rd part, so I am trying to achieve something simple, just use SingleChildScroolView inside a Column, but it is not working.
The widgets that I have are these:
Scaffold
Padding
Column
Obx
Divider
Obx
Column
Table <--- This is the table header
SizedBox
Table <--- I want to put SingleChildScrollView here to make this table scrollable
When I specify the height of the last table, it works, but I don't want to do it because it will be hardcoded and fixed... not good, like this:
SizebBox
height: 300
SingleChildScrollView
Table
I tried this, but hangs:
Expanded
SingleChildScroolView
Table
How to solve this? What am I doing wrong? Can this be fixed?
Thanks
SOLVED.
Guys, I found the problem...
I was trying to put SingleChildScrollView inside a Column, but this Column is inside another Column. AND THIS WAS THE PROBLEM (scrool inside a column that is inside another column)...
I change everything and now I am working with only ONE COLUMN, and SingleChildScrollView can work!
Follow the code:
https://flutlab.io/editor/0b329333-cacb-4903-89bb-053c51a18bd9
Hope this can help someone else.
Thank you all
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.
In a column or any widget, when i am trying to use listview.builder it don't execute the code. But when i bundle listview.builder in expanded widget it successfully run. Why it runs in expanded widget not another widget?
in the 1st image Without expand and using shrinkwrap: true my output is like that, but why?
In the 2nd image when I am wrapping my listview.builder in expanded widget it runs successfully, why?
Listview.builder works in Column when you add shrinkwrap property as true. It is because listview and its parent takes different height or size, once you add shrinkwrap property it will get minimized to children height and will work fine. Without shrinkwrap it throw overflow or rendering error.
And when you use it with expanded widget both parent and listview expands to the same height so it working fine with Expanded widget
How can I use condition in widget? I did it with empty widget like container() or Text() but when I put empty Widget in row() and give spaceBetween of MainAxisAlignment it takes their own space without any showing. Searching on the internet I think there are only the old info so that's not working anymore (if I am wrong I'm really sorry).
If conditions are not allowed and I do not want to show the widget - How can i do that?
If i understand correctly, you want to render Row conditional with size of childrens.
List<Widget> elements = []
Row(children: elements)
First option is to initiate elements inside your initState(){} method.
Another one, if you want to change it dynamically, then you have to know about setState(){} method and how key works, that is optional attribute of all Stateful/Stateless Widgets.