I have a GridView whose parent is ListView. How can I disable scroll in GridView so users can scroll the ListView?
I can't find any attribute in GridView to disable scroll even the content is fully rendered.
I think you can disable it by setting primary property as below:
GridView.count(
shrinkWrap: true,
primary: true,
children: <Widget>[],
// ...
)
Or if you want to disable it entirely:
hysics: new NeverScrollableScrollPhysics()
Related
I try to make an apps using long GridView with complexe item. I use GridView.builder which is optimize and it creates visible items (and it do the job !).
But in my case, I need some widget before and I must add Column() and SingleChildScrollView.
When I do that I need to change GridView.builder with primary=false and shrinkWrap: true.
But now, all GridView items are generated.
EDIT: New demo
My wanted behavior is the mode "ColumnWithGrid".
Check this demo to understand issue.
Press top buttons to switch modes: open Console and check log
https://dartpad.dev/?id=4f60ffbf656767a6e5c5bccc280acd3a
I think "shrinkWrap" property must stay to false but I never success to keep it in this case.
My question:
How to use GridView.builder properly when I need to include it inside Column() or whatever ?
How to make the mode "ColumnWithGrid" without generate full list (using dev.pub, ...) ?
Thanks
After some search and experiment, I found some posts about this topic (which is true for GridView or ListView widget) and my conclusion is :
GridView doesn't work like I expect !
When I create just a single GridView, it's like I create a container of my full device area and I put GridView inside.
This "hidden container" just keep info visible inside this container area.
So if I include my GridView inside Column without any container, it doesn't create it for me and unroll all my data to compute properly size.
The feature that expected is : GridView computes only items at screen and unroll virtually data (so manage local/global slider position to create only item inside visible area).
I update my demo to show the effect about all cases.
Sources:
https://docs.flutter.dev/cookbook/lists/long-lists
https://medium.com/saugo360/flutter-creating-a-listview-that-loads-one-page-at-a-time-c5c91b6fabd3
A CustomScrollView in combination with SliverList and SliverGrid can be used to achieve lazy loading.
CustomScrollView(slivers: [
SliverList(
delegate: SliverChildListDelegate([
const Center(
child: Text(
"Header",
style: TextStyle(fontSize: 40),
),
),
]),
),
SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
print("generate the item $index");
return Container(color: Colors.blue);
},
childCount: 100,
),
),
]),
https://dartpad.dev/?id=9633305d9a2daa0905de852fa003aba1
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 add the 'pinned item' functionality, similar to Google Keep, on a ListView?
I tried doing 2 list view, and putting the pinned one on top of a Column. But the problem is they scrolled separately, and if I wrapped the column in a Singlechildscrollview, it just gives error.
Am I on the right track of doing it or there is a way by just using a single list view?
Implement if you want:
add an extra field to your object: bool pinned -> then you sort the list to make sure the pinned items are on top of the list
put a GestureDetector around the item and use the onTap to set the pinned value -> pinned = !pinned
Or try this package I just found:
https://pub.dev/packages/pinnable_listview
I think I got the Singlechildscrollview worked the way I want it to. I just have to set the ListView shrinkWrap: true, and physics: NeverScrollableScrollPhysics(). I'm not sure if this is a good idea tho, since most people say that shrinkWrap is quite a heavy operation to use.
SingleChildScrollView(
physics: ScrollPhysics(),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Pinned'),
PinnedListItemHere(), //ListView of Pinned Items
Divider(
height: 25.0,
thickness: 2.0,
),
Text('Others'),
UnpinnedListItemHere(), //ListView of Unpinned Items
],
),
),
In the following example, which is making a horizontal list of product cards, a shrinkWrap property was used. Newetherless I did not notice any difference wheither it used or not. So what's actualy the purpose of the shrinkWrap here?
ListView.builder(
shrinkWrap: true,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
scrollDirection: Axis.horizontal,
itemCount: products.length,
itemBuilder: (context, index) {
return ProductCard(product: products[index]);
},
)
ListView usually fills all the available space of its own parent, without any attention to the minimum size that each item needs. with using shrinkWrap and setting it to true you can change this scenario so that the ListView only occupies the space that each item needs in general. Obviously, if the parent widget does not have the minimum height, it would scroll even if you set shrinkWrap to true.
This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.
If you do not set the shrinkWrap property, your ListView will be as big as its parent.
If you set it to true, the list will wrap its content and be as big as it children allows it to be.
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.