-
Notifications
You must be signed in to change notification settings - Fork 63
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SliverPinnedHeader Enhancement #25
Comments
I’m glad you like the package! A leadingMargin is something I was already intending to do, if you want it I can see if I can prioritize it a bit more. The controller part I don’t completely get, how do you have that in mind? |
A leading margin will be sufficient for most scenarios. So excited about this feature, can't wait to use that! (Currently, I use CompositedTransformTarget and CompositedTransformFollower with a complicated logic to handle this 😞 ) The controller/pinned is just control if the widget should be pinned, In some cases, we allow the user to choose if something needs to be pinned or not. But It is not that important since I believe this also can be achieved by changing the widget parent from SliverPinnedHeader to SliverToBoxAdapter. Another thing I can think of: a widget builder will be super helpful, so the widget can be different when pinned typedef Widget SliverPinnedHeaderWidgetBuilder(
BuildContext context,
SliverPinnedHeaderState state,
);
SliverPinnedHeader(
builder: (context, state) {
return AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
transitionBuilder: (child, animation) => ...,
child: state.isPinned
? Container(key: const ValueKey('blue'), color: Colors.blue)
: Container(key: const ValueKey('red'), color: Colors.red),
);
},
) |
Hmm adding the leading margin comes with a few decisions I'm not ready to make atm. But @Peng-Qian why do you need the Widget build(BuildContext context) {
final double leadingMargin = 20;
return SliverPinnedHeader(
child: Container(
margin: const EdgeInsets.only(top: leadingMargin),
child: YourChildWidget(),
),
);
} |
sorry for confusing here, I mean I have used CompositedTransformTarget with stack to implement a sticker, it can stick to any position but with complex logic... and that is the reason why so happy to find this package~ |
In my use case, the widget will only be pinned when it reaches to appbar, and it will be pushed by the next pinned header. Thus, add margin will break UI looking when pinned header does not reach appbar. |
Still sounds like something you could do with a margin and a multisliver After reading your comment again:
Do you mean that if you’d add the margin then it would also be there when it’s not yet pinned and that would not work for your layout? Perhaps to get this effect you could use a custom pinned sliver with a paintExtent of the size you want between the top and your pinned sliver and the top but which has no layoutExtent such that it doesnt affect the layout of your view and put that above it? |
Yes, The effect more like the following gif, The flutter_sticky_header can achieve the effect, but the thing is this package does not support a nested pinned header.
I am a little bit confused about this part. Do you mean I should pin an invisible header on the top and then it can keep a distance when the following header pinned? |
Which part do you mean? I don’t really see a part that matches what you told me before
Yes pretty much |
any sticky header on the gif. But in my case, the situation are more complicated. There are nested scroll views and items can go behind the app bar, which means the scroll view starts at the top of the screen, and the header should be pinned under the app bar. I insert an invisible sliver app bar to achieve the effect with this package(I think that similar to what you talk about). But what I try to do now, is pinned another header under the sticky header(e.g. pin an orange circle header under blue header 1 on the gif). all in all, I am trying to nested another sticky header under another sticky header properly. 😂 |
You should be able to use MultiSliver combined with the pinned header for that. Perhaps you can share some code? |
@Peng-Qian have you managed to get it working? |
I’m gonna close this issue, if you want me to reopen feel free to comment and I’ll do so |
Hi @Kavantix,
Thx for your awesome package! It makes Sliver more flexible and powerful!
I am wondering if it is possible to introduce more prop to control SliverPinnedHeader.
Such as a position to set where to pin (e.g. pin at the 300px from top) and a controller to control when to pin?
I think this may also solve #20 request
The text was updated successfully, but these errors were encountered: