Comments (13)
letsar
commented on July 16, 2024
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.
letsar
commented on July 16, 2024
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.
kawi15
commented on July 16, 2024
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.
kawi15
commented on July 16, 2024
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.
letsar
commented on July 16, 2024
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.
kawi15
commented on July 16, 2024
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.
letsar
commented on July 16, 2024
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.
kawi15
commented on July 16, 2024
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.
kawi15
commented on July 16, 2024
Any proggress/update?
from flutter_staggered_grid_view.
letsar
commented on July 16, 2024
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.
letsar
commented on July 16, 2024
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.
kawi15
commented on July 16, 2024
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.
lwj1994
commented on July 16, 2024
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)
- MasonryGridView.builder is still scrolling after being given Neverscrollablescrollphysics
- The position state cannot be restored when you use Navigator.of(context).pop(); HOT 2
- 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
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.