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.
Related
I have a header widget and then a tab view. I have been able to make them scroll as one using a nestedscrollview. But I want the scrolling to not happen if tab view data is not present.
Disable scroll if total child length < scroll height:
NestedScrollView(
physics: (sumHeight>scrollHeight) ? AlwaysScrollableScrollPhysics() : NeverScrollableScrollPhysics()
)
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
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()
//SOLVED: one of the containers inside the stack had an margin attribute that margins symetrically. Changed it to EdgeInsets.only(left:..,top:..)
I want to let my ListView start after the blue part of my page. But there is an blank and redundant space that doesn't allow me to start at expected point.
the blank space that i get
Here is my code:
Column(children:[Stack(some other code),Expanded(child:ListView(..))]);
The space is there because you have wrapped Stack(some other code) inside Column.
This is what you should do if you want the ListView to be over some other code,
Stack(
children:[
//some other code,
Column(
children:[
Expanded(
child : ListView(...)
),
...
According to documentation:
By default, ListView will automatically pad the list's scrollable extremities to avoid partial obstructions indicated by MediaQuery's padding. To avoid this behavior, override with a zero padding property.
To remove it wrap the ListView into a MediaQuery.removePadding:
MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView(...))
I am using NestedScrollView for snap behavior.
Widget Tree:-
NestedScrollView => TabView => CustomScrollView => SliverList
For load more when I am adding scroll controller floating behavior stop working
You should not set your own ScrollController to CustomScrollView if the CustomScrollView is wrapped inside NestedScrollView.
The "controller" and "primary" members should be left unset, so that the NestedScrollView can control inner CustomScrollView. If the "controller" property is set, then the inner CustomScrollView will not be associated with the NestedScrollView.
Solution
You can use the the NotificationListener to implement load more functionality.
Simply wrap your CustomScrollView with the NotificationListener<ScrollUpdateNotification> widget.
NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification scrollInfo) {
if (scrollInfo.metrics.pixels ==
scrollInfo.metrics.maxScrollExtent) {
///load next page here
loadMore();
}
},
child: CustomScrollView(
// ...
),
),