I have a problem in singleChildScrollView. Below is my code:
return Scaffold(
body:SingleChildScrollView(
child:
Column(
children:[
//...
Container(height:500,child:listview.builder())
],
//...
)),
);
What I want is to keep on scrolling the children of Column inside the singleChildScrollView when the items of listview.builder are ended. Alternatively, I cant even remove the container (the parent of listview.builder) it causes rendering error. If the question in not clear, please ask me. I'll explain. Kindly help :(.
Related
I had a very basic Flutter layout which looked something like this:
Column
widget1
expanded
widget2
This worked great. Widgets 1 and 2 were rendered and my main "expanded" widget was taking the rest of the screen, great!
Next I wanted to add two buttons on each side of my expanded widget. So I tried this:
Column
widget1
Row
button1
expanded
button2
widget2
Now Flutter throws a layout error: failedAssertion: size.isFinite
Reading about it online, people are saying you cannot put an Expanded inside a Row or a Column because they use infinite main axis length, so if the child is also infinite this causes problems. However, I already had Expanded inside a Column and that worked fine! Why is putting it inside a Row problematic?
One SO suggestion was to put mainAxisSize: MainAxisSize.min in the Row, but that does not help.
Some of the other suggestions were to put the widget inside a Container with fixed sizes. This does resolve the error, but now the widget goes off screen. And this sort of defies the whole purpose of Flutter responsive UI. Why would anyone want to create a fixed sized object on a platform where screen sizes vary widely?
What am I doing wrong here? Seems I am misunderstanding something fundamental here...
it works fine and doesn't through any error
Column(
children:[
Container(
height:50,
width:50,
color:Colors.red),
Row(
children:[
Container(
height:50,
width:50,
color:Colors.red),
Expanded(
child:Text('hgdhj hdgakhjgck dgfkejg')
),
Container(
height:50,
width:50,
color:Colors.red),
]),
Container(
height:50,
width:50,
color:Colors.red),
])
I want to built a split screen for larger devices. One half should be as small as possible but as large as needed and the other half should occupy the rest of the screen.
I figured I'd use a Row containing two Scaffolds (one wrapped in a Expanded widget) like so:
Row(children: [
Scaffold(appBar: MyAppBar1(), body: Container()),
Expanded(child: Scaffold(appBar: MyAppBar2(), body: Container())),
])
However, I get the following error message when wrapping a Scaffold inside a Row:
RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
I know that I could just wrap the Scaffold inside a SizedBox with a fixed width, but I want the Scaffold to automatically take the right size.
Scaffold itself doesn't have a width constraint, so it will try to occupy as much space as possible (if I'm remembering correctly), and Row on its part won't try to constrain it, hence the error.
You have two options:
wrap the Scaffold in another Expanded, then use the flex argument on both the Expanded to give them size relative to each other (i.e., if one has flex: 1 and the other flex: 2, the second one will have twice the size of the first)
wrap the Scaffold in a ConstrainedBox and set the constraints yourself, which I guess in this case would be the maxWidth set on the smaller side
As others pointed out, anyway, if you don't really need another Scaffold, you can simply use two Column and get a similar result.
You do not need to use two Scaffolds. Use two columns inside one Column in Scaffold. Wrap the second Column with Expanded. This way your first part will take as much space as needed and the second part will take the remaining space.
home: Scaffold(
body: Column(
children: [
Column(
children: [],
),
Expanded(
child: Column(
children: [],
),
),
],
),
)
Why does a ListView completely ignore imposed constraints?
#override
Widget build(BuildContext context) {
return Padding(
child: Container(
constraints: BoxConstraints(maxWidth: 500),
child: ListView(
children: buildList(data),
),
),
);
}
The displayed ListView does not seem to be bothered at all with the maxWidth:500 of the parent container (same if replaced with a ConstrainedBox) and all elements (which are Rows) go full screen width.
Why?
The solution is to work with width of children instead, but still I'd much rather constrain the entire listView, and also if there's a constraint, shouldn't everything inside be forced not to exceed it?
EDIT: After hours of trying various things it finally works. Turns out the list view needed to a child of a Center, otherwise it would not pay any attention to SizedBoxes, ConstrainedBoxes, Containers etc. you'd put on it or its children and stretch full screen no matter what.
What are the parent widgets of the Padding(child: Container(... list view ))? I mean are you sure that a parent is not imposing its constraints on its children? Try do replace your ListView with Container(color: Colors.red, height: 100) and see if it respects the constraints. If it does not, there probably is a parent widget with infinite width constraint or something like that!
A solution can be wrap your Container with an UnconstrainedBox but I would recommend first checking my first point :D
Now when I add a ListTile inside a view (no matter its Column,ListView,...) It gets whole width, I want it to be kinda wrap_content as we have in android.
I know this is an old post but here is a solution I found for future reference:
You can use the IntrinsicWidth widget to stop the ListTile from expanding.
Container(
child: IntrinsicWidth(
child: Column(
children: [
ListTile(title: Text("Hello")),
ListTile(title: Text("There")),
],
)
)
)
As far as I can tell this is not how you are supposed to use ListTile. In the docs it even says:
ListTile requires fixed width constraints
Also, regarding IntrinsicWidth the docs say:
This class is useful, for example, when unlimited width is available and you would like a child that would otherwise attempt to expand infinitely to instead size itself to a more reasonable width. [...] This class is relatively expensive, because it adds a speculative layout pass before the final layout phase. Avoid using it where possible.
may be like this
Row(
children: <Widget>[
ListTile(),
Text("hell")
])
Hi all fellow developers,
I am developing a responsive web page in flutter using the flutter web SDK, but i am stuck at one part of the page where i have a Row inside row I have 2 Containers among which i want the 1st Container to be Scrollable and the Second container to be of constant size(Non scrollable) just like whatsapp web ui where contact list keeps scrolling but the chat side and the rest of the page doesn't.
please Help me,
Thanks in advance...
This should work You need a fixed sized container and make sure a Scroll able widget should be inside it. Now size can be made responsive by using Media Query Parameters and below code you only need to adjust space and sizing and it would work.
Row(
//Your parent Row
children: [
Container(
//static non scrollable container
child: Column(
children: [
//Children you want to add
//this wont be scrollable
//It is also preferred that you give this some height or width too
],
),
),
Container(
//Scrollable container
//Please adjust height and width yourself
//You can use media query parameters to make it responsive
width: 200,
height: 500,
child: SingleChildScrollView(
//You can also change the scroll direction
child: Column(
//Add children you want to be in
//Scrollable column
),
),
)
],
),