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.
Related
I have a GridView.builder that build me a grid with elements inside, how can I remove the distance from the bottom of my grid element so that there is no overflow on all devices, I use the screenutil package.
Here is my griddelegate code:
Widget buildProduct(List<Product> product) => GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 20.w / 33.h,
crossAxisSpacing: 10.w,
mainAxisSpacing: 10.h,
),
itemCount: product.length,
itemBuilder: (context, index) {...}
);
need more code to solve the problem but maybe you can try to wrap the Gridview with Expanded and remove shrinkWrap
I am attempting to create a custom grid view, and i need to put constraints on the Draggable feedback or it expands to cover the entire screen. Normally in builders, there is a constraints variable passed, but there is not one in the SliverChildBuilderDelegate. What would be the best way to limit the size of the feedback of the draggable to the current size of the widget? The ?'s in feedback is where the variable should go.
return GridView.custom(
shrinkWrap: true,
primary: false,
scrollDirection: Axis.vertical,
controller: _scrollController,
physics: const ClampingScrollPhysics(),
gridDelegate: SliverQuiltedGridDelegate(
crossAxisCount: 4,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
repeatPattern: QuiltedGridRepeatPattern.inverted,
pattern: widget.pattern,
),
childrenDelegate: SliverChildBuilderDelegate(
childCount: widget.children.length,
(context, index) {
var selectedWidget = widget.children[index];
return LongPressDraggable<GlobalKey>(
data: selectedWidget.key,
onDragStarted: _onDragStarted,
onDragEnd: _onDragEnd,
feedback:
SizedBox(width: ?, height:?, child: selectedWidget),
childWhenDragging: Container(),
child: selectedWidget,
)}))
I have used GridView.builder to show API data with below code.
GridView.builder(
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: snapshot.data!.items.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1 / .3,
),
itemBuilder: (context, index) {
return InkWell(
onTap: () {},
child: CategoryItem(categoryItem: snapshot.data!.items[index],
),
);
},
),
Here Now my data length is 4 only. when it increases then data will be scrollable. And that working fine But thing is, I want to get resizable height with data length. It takes a default height which is not compatible.
Is there any way to reduce default height or customize it?
Thanks in advance.
Getting below output :
I'm trying to use show images using by Image.file(File(path)) in gridview. When I scrolling it down and then up it's reloading images. This caused showing them in white. When I'm looking for this issue there is mentions "lazy loading list" but I don't think it's related with this. Also I tried caching Image widget with LruCache but it's still same. How can I prevent this reloading?
Here is my code snippet:
child: GridView.builder(
itemCount: paths.length,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 0.5,
crossAxisSpacing: 6,
mainAxisSpacing: 6,
crossAxisCount: 5,
),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () => {remove(paths[index])},
child: Image.file(File(paths[index])),
);
},
),
This is an error: stop reason = EXC_RESOURCE RESOURCE_TYPE_MEMORY flutter
GridView(gridDelegate: gridDelegate, cacheExtent: 9999,)
i am using gridview.builder to list these icons with crossaxiscount of 3 i want to display the icons of 2nd row in the middle(add spacing before tv icon so both icon shift to the middle)
GridView.builder(
itemCount: state.productList.length,
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 5,
childAspectRatio: 2),
itemBuilder: (context, i) {
return Container(
child: FlatButton(
child: Image.asset(_icons[i]),
onPressed: () {
_productListBloc.add(
ItemTapProductListEvent(
state.productList[i]));
},
),
);
}),
use flutter_staggered_grid_view for customised grid layout.