Comments (13)
Hi, I can reproduce. It happens when there is something after a SliverMasonryGrid
. I'll try to fix this. In the meantime, if the first grid is finite, maybe you use a MasonryGridView
instead of a SliverMasonryGrid
. Something like this:
Column(
children: [
MasonryGridView(..),
Separator(...),
Expanded(
child: MasonryGridView(...),
),
],
);
from flutter_staggered_grid_view.
For the issue with the multi slivers, I'm not sure this is something simple to fix, at least not completely.
The issue we have here is because of this part of the code:
// We ran out of children before reaching the scroll offset.
// We must inform our parent that this sliver cannot fulfill
// its contract and that we need a scroll offset correction.
geometry = SliverGeometry(
scrollOffsetCorrection: -scrollOffset,
);
return;
To fix this, I probably need to fix the condition in the enclosing while
. But In that case, we have an issue when we try to build this component from the end. The current algorithm is not fit for this. I would need to find another way to be able to correctly position the items before the last one, and since the offset of each child depends on the ones before, it's not trivial.
I will need to think about it. I hope that my solution above can help you in the meantime.
from flutter_staggered_grid_view.
Thank you for quick response.
Unfortunately your solution is not suiting for me as I want both these list with separator to be scrolled as one list and also above this I have two horizontal lists which I also want to be scrolled as one list with the masonry ones.
So I think CustomScrollView
is necessary here.
I hope you will find good and easy solution.
from flutter_staggered_grid_view.
I don't know, but maybe this will be helpful for you.
I tried another package - https://pub.dev/packages/masonry_grid and with it it's working as it should. Maybe you will find there something what can help you.
I still waiting for you to find a good solution as mentioned package have some performance issues.
from flutter_staggered_grid_view.
Hi, I think I fixed the issue, can you test on this branch to see if it's also ok for you: https://github.com/letsar/flutter_staggered_grid_view/tree/feature/masonry_cache ?
from flutter_staggered_grid_view.
Hi, I found some bug around sixth index on second list. I will show you it on video recording as it is hard to explain.
https://drive.google.com/file/d/1TMF-IDR07D5pNq6YnO19a8fvE4vFgLeK/view?usp=sharing.
Except that it is working really good.
from flutter_staggered_grid_view.
Thanks for trying this branch. I can try to pinpoint the issue, but if you have a reproducible code it would help me a lot.
from flutter_staggered_grid_view.
I created something like this for quick reproducible code, but in this case bug happening on last indexes when scrolling back, so kinda different than on video I posted before, maybe because there was more data?
I hope this will be good.
https://drive.google.com/file/d/1TP3QSUyVRsnrOXylbqKYJoFQfbJd82_1/view?usp=sharing
Expanded(
child: CustomScrollView(
shrinkWrap: true,
slivers: [
SliverPadding(
padding: EdgeInsets.symmetric(horizontal: 8) + const EdgeInsets.only(bottom: 8),
sliver: SliverMasonryGrid.count(
crossAxisCount: 2,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
childCount: 2,
itemBuilder: (context, index) {
return Container(
height: 200,
child: Image.network('https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Hydrochoeris_hydrochaeris_in_Brazil_in_Petr%C3%B3polis%2C_Rio_de_Janeiro%2C_Brazil_09.jpg/1200px-Hydrochoeris_hydrochaeris_in_Brazil_in_Petr%C3%B3polis%2C_Rio_de_Janeiro%2C_Brazil_09.jpg'),
);
}
),
),
SliverToBoxAdapter(
child: Container(
margin: EdgeInsets.only(
bottom: size.height * 0.02,
top: size.height * 0.02,
),
child: Stack(
children: [
Divider(
height: 37,
thickness: 1,
indent: 8,
endIndent: 8,
color: const Color(0xFF98B9DC)
),
Container(
height: 37,
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 8
),
alignment: Alignment.center,
margin: EdgeInsets.symmetric(horizontal: 32),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: const Color(0xFFE4ECF6)
),
child: Text(
'wydarzenia w dalszej odległości',
style: TextStyle(
fontSize: 14,
color: const Color(0xFF405978)
),
)
)
],
),
),
),
SliverPadding(
padding: EdgeInsets.symmetric(horizontal: 8) + const EdgeInsets.only(bottom: 8),
sliver: SliverMasonryGrid.count(
crossAxisCount: 2,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
childCount: 20,
itemBuilder: (context, index) {
return Container(
height: 250,
child: Image.network(
index % 2 == 0
? 'https://www.rainforest-alliance.org/wp-content/uploads/2021/06/capybara-square-1.jpg.optimal.jpg'
: 'https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=1200:*'
),
);
}
),
),
],
),
)
from flutter_staggered_grid_view.
Any proggress/update?
from flutter_staggered_grid_view.
Hi, I can't reproduce with the above example. I'll try to find a layout which causes this, but it won't be easy
from flutter_staggered_grid_view.
Can you send me the actual size of the CustomScrollView
in the first video, along with the heights of each elements in the Sliver
so that I can try to reproduce within the same conditions?
from flutter_staggered_grid_view.
It's dynamic, when I scroll to the end of the list it's loading more from backend. Initially it's 15 elements.
Height of each element in sliver is also dynamic, depending on how long title is.
Here is how it looks, but there is a lot of different parameters that are hard to reproduce.
SliverPadding(
padding: EdgeInsets.symmetric(horizontal: size.width * 0.03) + const EdgeInsets.only(bottom: 8),
sliver: SliverMasonryGrid.count(
crossAxisCount: 2,
mainAxisSpacing: size.width * 0.03,
crossAxisSpacing: size.width * 0.03,
childCount: widget.outOfLocationIndex,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () async {
if (canClick) {
try {
widget.onClick(widget.dataList[index]);
} catch (e, stack) {
printl(stack);
errorMsg(e, context);
await Sentry.captureException(e,
stackTrace: stack);
}
}
printl(
"DEBUG widget.dataList 346 render widget 88774982");
},
child: NetflixEventCard(
index: index,
query: widget.query,
eventName: widget.dataList[index].name,
eventDate: widget.dataList[index].event_date,
partySpotName: widget.dataList[index].party_spot != null
? widget.dataList[index].party_spot!.name ?? ''
: '',
address: widget.dataList[index].address == null
? ""
: widget.dataList[index].address!.city,
images: widget.dataList[index].images
),
);
}
),
),
SliverToBoxAdapter(
child: Container(
margin: EdgeInsets.only(
bottom: size.height * 0.02,
top: size.height * 0.02,
),
child: Stack(
children: [
Divider(
height: 37,
thickness: 1,
indent: size.width * 0.03,
endIndent: size.width * 0.03,
color: const Color(0xFF98B9DC)
),
Container(
height: 37,
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 8
),
alignment: Alignment.center,
margin: EdgeInsets.symmetric(horizontal: size.width * 0.12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: Theme.of(context).brightness == Brightness.light
? const Color(0xFFE4ECF6)
: const Color(0xFF374352)
),
child: Text(
'wydarzenia w dalszej odległości',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
color: Theme.of(context).brightness == Brightness.light
? const Color(0xFF405978)
: const Color(0xFFDBE3EE)
),
)
)
],
),
),
),
SliverPadding(
padding: EdgeInsets.symmetric(horizontal: size.width * 0.03) + const EdgeInsets.only(bottom: 8),
sliver: SliverMasonryGrid.count(
crossAxisCount: 2,
mainAxisSpacing: size.width * 0.03,
crossAxisSpacing: size.width * 0.03,
childCount: widget.dataList.length - widget.outOfLocationIndex,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () async {
if (canClick) {
try {
widget.onClick(widget.dataList[index + widget.outOfLocationIndex]);
} catch (e, stack) {
printl(stack);
errorMsg(e, context);
await Sentry.captureException(e,
stackTrace: stack);
}
}
printl(
"DEBUG widget.dataList 346 render widget 88774982");
},
child: NetflixEventCard(
index: index + widget.outOfLocationIndex,
query: widget.query,
eventName: widget.dataList[index + widget.outOfLocationIndex].name,
eventDate: widget.dataList[index + widget.outOfLocationIndex].event_date,
partySpotName: widget.dataList[index + widget.outOfLocationIndex].party_spot != null
? widget.dataList[index + widget.outOfLocationIndex].party_spot!.name ?? ''
: '',
address: widget.dataList[index + widget.outOfLocationIndex].address == null
? ""
: widget.dataList[index + widget.outOfLocationIndex].address!.city,
images: widget.dataList[index + widget.outOfLocationIndex].images
),
);
}
),
),
from flutter_staggered_grid_view.
it also happened with any other sliver list.
CustomScrollView{
// SliverMasonryGrid
SliverMasonryGrid.count() ,
// SliverList wrap with DecoratedSliver
DecoratedSliver(
SliverList.separated()
)
}
from flutter_staggered_grid_view.
Related Issues (20)
- Problems when scrolling up
- Document SliverAlignedGrid and SliverMasonryGrid
- Wrap like effect with fixed width and height for children
- SliverMasonryGrid.extent scroll up jank
- readme, examples out of date
- BorderRadius Issue HOT 1
- Rename `examples` back to `example`
- Scroll to specify wiget ?
- scrolling issues with two SliverMasonryGrid.count in the same CustomScrollView HOT 4
- staggered grid view rendering issue
- Masonry Separator? HOT 2
- `MasonryGridView.custom` doesn't handle `findChildIndexCallback` properly HOT 1
- Images are getting chopped,if we make the image to cover the tile.
- Tile alignment when first row is not filled.
- Can't use `StaggeredGrid.custom` since `StaggeredGridDelegate` is not accessible through library `flutter_staggered_grid_view`.
- Null error when scrolling back to the top
- Scroll position not preserved when switching tabs HOT 2
- Updated layout information required for RenderIndexedSemantics#7583c NEEDS-LAYOUT to calculate semantics.
- Null check operator used on a null value
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flutter_staggered_grid_view.