I'm having trouble working out how to size a horizontal scrollable (ListView) within a vertical layout (a vertical ListView in this case).
I want the ListView to be as tall as its contents but am unsure how to achieve this with a horizontal scrollable.
For example:
ListView(
children: [
//How do I size this ListView to the height of its child?
ListView(
scrollDirection: Axis.horizontal,
children: [for (int i = 0; i < 2; i++) Widget()],
),
],
),
I don't think that would be possible. It would require the ListView to build every child to use the maximum height and this would go again the lazy loading behaviour of the ListView.
Try wrapping the inner ListView with a Container of height: double.infinity
You could wrap the outer ListView in a Container with a height you would like to set, this would set the height of the outer ListView and the inner ListView inside the container should expand this outer ListView's height.
Try using shrinkWrap: true. It's explained in details in official docs and in another answer on stackoverflow
Related
I am using a ListView Builder, and that has to be wrapped inside a Container. If i don't give a height parameter then i get Vertical viewport was given unbounded height. Now, because of this if i only have 1 item in the list, any content comes after the container, which wastes a lot of screen real estate and doesn't look aesthetically pleasing.
How can i make the parent widget i.e Container() to adjust to the size of child widget ListView.builder() ?
Add this shrinkWrap: true to your ListView and Remove Height from container.
snippet code:
return Container(
child: ListView.builder(itemBuilder: (context, index) {
return listItem(itemArray[index]),
},
itemCount: itemArray.length,
shrinkWrap: true),
);
I have 2 rows in my screen, the first row is consist of dropdown button and elevation button and the second row is where the stream builder located, I used flexible so that the stream builder is scrollable. What I want is every time I scroll the stream builder I want the first row to follow the scroll not stay in the screen.
This is how my widget set:
Scaffold
-Column
-Row
-Dropdown button
-Elevated buton
-Flexible
-Streambuilder
-stack
-listview
Just like in facebook everytime you scroll down the "what's in your mind" controller disappers too, not floating like an app bar
Inside Listview add physics: NeverScrollableScrollPhysics()
//
Listview(
physics: NeverScrollableScrollPhysics(),
return .....;
)
//
Follow this pattern.
If you want that widget to disappear when you scroll, you need to wrap your Column in a SingleChildScrollView which you will need to wrap in a Flxible
Code:
Flexible(
child: SingleChildScrollView(
child: Column(
//your normal code insode Column
Depending on your code, you may also need to make the ListView not scroll (as suggested by Rafid):
Listview( physics: NeverScrollableScrollPhysics()
How to implement PageView width child have width larger screen width.
PageView(
controller: controller,
children: const <Widget>[
Image('img1.jpg'),
Image('img2.jpg'), // large image one
Image('img3.jpg')
],
)
https://i.imgur.com/jvowQd2.mp4
try using InteractiveViewer. It lets you have a bigger size image or widget in it and the user can zoom or zoom out from it.
InteractiveViewer documentation.
I'm creating a widget that presents a Stack inside a Container. Inside the Stack there is a dynamic Column inside a Positioned widget, which sticks the Column to the Bottom.
I am trying to wrap the Stack in a SingleChildScrollView, that if the dynamic Column will have lots of children it will be able to scroll.
But after I add the scroll view I get this error message:
RenderStack object was given an infinite size during layout.
A scrollView doesn't have height, it will use infinite height for it's children. So the stack should be wrapped in a sizedBox widh a known height in case that you want that. If you want the stack to fill the screen then remove the singleChildScrollview completely. And if you want the stack to be scrollable from the inside. Just add SingleChildScrollView inside the stack
return Scaffold(
body: Container(
color: Colors.blue[100],
child: Stack(
children: [
Positioned.fill(child: SingleChildScrollView(child: MyColumn()))
],
),
),
);
EDIT 1:
Ok the problem is the layout itself. Since you only use the stack to position the image. And you know the widht and height of the image, and the background shape fills all the items. We could
Isolate the stack only to the image, and use padding and some calculation to have the layout build in a similar way.
Then render everything else inside a normal column
My implementation https://dartpad.dev/230b14d8f0b22b45929a75c208786257
From the RenderStack documentation:
First, the non-positioned children (those with null values for top, right, bottom, and left) are laid out and initially placed in the upper-left corner of the stack. The stack is then sized to enclose all of the non-positioned children. If there are no non-positioned children, the stack becomes as large as possible.
Since all of your Stack's children are positioned, Stack will match the maximum size constraint passed down by the SingleChildScrollView. This size has infinite height, so the Stack is forced to have infinite height as well.
To fix this, you will need to find another way to accomplish what you want. One option that comes to mind involves a ConstrainedBox providing a minimum height (obtained from a LayoutBuilder), a non-positioned Column, and a bottomCenter alignment on the Stack itself. This is similar to the first code sample in the SingleChildScrollView documentation:
LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
// This ensures that the Stack fills the entire viewport,
// even if the Column is small.
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
),
child: Stack(
// Place the only non-positioned child (the column) at the bottom
alignment: Alignment.bottomCenter,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [ /* ... */ ]
)
]
)
)
);
}
)
I have a ScrollBar surrounding a CupertinoPageScaffold child Widget.
Inside this contains a few horizontal scrolling ListViews which should not show scrollbars but due the parent ScrollBar being present, every scrolling widget below has a scroll bar attached to it.
Is there a Widget to wrap scrolling Widgets that removes the scrollbar?
I've looked for Widgets that may be called NoScrollbar but these don't exist.
If I remove the parent ScrollBar then the scrollbars are removed
If you wrap the ListViews for which you don't want scroll bars for in a NotificationListener in the following manner:
NotificationListener<ScrollNotification>(
onNotification: (_) => true,
child: ListView(....)
)
I think those ListViews will not have scrollbars.
You can use ScrollConfiguration to hide the scrollbars.
ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
child: ListView(....)
)
You can use this with any scrollable widget.