I have a GridView that I want to make scrollable even when the mouse is outside of the GridView. I have tried to add the GridView inside a SingleChildScrollView and added shrinkWrap: true to the GridView. I have also tried adding a Column around the GridView and Expanded as well. Here is the code:
return SingleChildScrollView(
child: Column(
children: [
Container(
constraints: BoxConstraints(maxWidth: 750),
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 10),
itemCount: course.subjects.length,
itemBuilder: (context, idx) {
return CourseSubjectListEl(course, idx, data);
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 10,
childAspectRatio: 0.7,
mainAxisSpacing: 0,
crossAxisCount: 2),
),
),
],
),
);
As you can see on the screenshot, you can only scroll when the mouse is over the GridView. I think this problem can cause confusion for web users, where you normally can scroll with the mouse everywhere.
You can add
primary: false,
Property inside GridView. That will make the GridView scroll physics false and will act on how the parent scrolls (which in case is your SingleChildScrollView).
Probably you might want to remove physics: NeverScrollableScrollPhysics(), and add the above property.
Note: Make sure your scrollview contains the whole width of the screen you want to scroll
Related
I want to have a GridView in Flutter with a crossAxisCount of to but periodically show a widget that takes up the whole width (an advertisement banner). How can I do that with a GridView?
Here is my code where I want to incorporate ad banners for every 10th row or so:
GridView.count(
childAspectRatio: 1 / 1.05,
controller: _scrollController,
scrollDirection: Axis.vertical,
crossAxisCount: 2,
crossAxisSpacing: 0,
mainAxisSpacing: 5.0,
physics: const AlwaysScrollableScrollPhysics(),
children: widgetList.map((value) {
return value;
}).toList(),
)
You can use Wrap instead of GridView.
How can I customize or control GridView.builder scroll behavior such that it doesn't bounce back up to the top of the grid once the end of the grid is reached? I've tried changing physics but that doesn't seem to work for GridView. I've also tried to add a constant scroll behavior using ClampingScrollPhysics instead of BouncingScrollPhysics but this simply renders the grid unscrollable.
The bounce back is so bad that it doesn't allow the user to click on the last row of grid items. I tried to wrap the gridview in a container with padding but this also does not work. Any ideas?
return GridView.builder(
padding: const EdgeInsets.all(10.0),
// // physics: ClampingScrollPhysics(),
itemCount: loadedGroups.length,
itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
value: loadedGroups[i],
child: CardWidget(
id: loadedGroups[i].groupId as String,
cardLabel: loadedGroups[i].title,
imgPath: loadedGroups[i].imageUrl as String,
labelColor: Color.fromRGBO(0, 0, 0, .70),
)),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 2 / 2,
crossAxisSpacing: 10,
mainAxisSpacing: 25,
mainAxisExtent: 190,
));
}
I have a screen with a GridView widget containing custom Cards with images and texts. When the app initially launches it loads all the cards and their images, however, they get destroyed when scrolled off the screen. Is there a way that I can stop flutter from destroying the off-screen widgets?
Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.5,
),
itemCount: categories.length,
itemBuilder: (context, index) => CategoryCard(
category: categories[index],
),
),
),
Give flex or shrinkWrap: true, or use both
Expanded(
flex: 3, <--
child: GridView.builder(
shrinkWrap: true, <--
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.5,
),
itemCount: categories.length,
itemBuilder: (context, index) => CategoryCard(
category: categories[index],
),
),
),
Figured it out! GridView, ListView, etc., have addAutomaticKeepAlives and cacheExtent properties. By default addAutomaticKeepAlives: true doesn't destroy off-screen widgets, and providing the cacheExtent: DOUBLE VALUE describes how many pixels the cache area extends before the leading edge and after the trailing edge of the viewport.
I need a simple grid of widgets but without scrolling, similar to how I coded GridView below.
GridView.count(
padding: const EdgeInsets.all(20.0),
crossAxisCount: 2,
crossAxisSpacing: 20,
shrinkWrap: true,
// mainAxisSpacing: 20,
children: [
_TextField0(focusNode: focusNode),
_TextField1(focusNode: focusNode),
_TextField2(focusNode: focusNode),
_TextField3(focusNode: focusNode),
],
),
)
Is there a way to disable scrolling in GridView or is there another widget I should be looking at?
Yes, GridView (or ListView) has a parameter for scroll behavior. In your case, simply pass in:
physics: const NeverScrollableScrollPhysics()
How align item on top (bottom search field) after filter data in GridView.builder?
Below is my example:
Column(
children: [
Padding(
padding: EdgeInsets.all(10),
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: widget.emps.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:
MediaQuery.of(context).orientation == Orientation.portrait ? 2 : 4,
mainAxisSpacing: 20,
crossAxisSpacing: 20,
childAspectRatio: 0.693,
),
itemBuilder: (context, int index) {
return widget.emps[index].ename.contains(searchString) ? EmpCard(
emp: widget.emps[index],
press: () {
},
):Container();
}
there is no issue in alignment, issue is you are displaying container() instead of EmpCard() when you are not find a match,
you have to first create list for search outside of GridView.builder() and that has to be displayed. then alignment issue will be automatically solved.
update-
take new list out side build method;
List search=[];
//-----
onUpdate(value){
searchString=value;
search=[];
for(int i=0;i<widget.emp.lenght;i++)
{
if(<--Your search condition-->){
search.add(<--add your widgets here-->)}
}
}
then create your GridView.builder() with this search list istead of widget.emps.