-
Notifications
You must be signed in to change notification settings - Fork 64
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
SliverPinnedFooter #20
Comments
Can you elaborate on how this widget should work? |
the same as header, but pin at the bottom next header in the list |
actually, I have a reversed list and need to implement pinned header, but for reversed list it works like footer :-) |
in this demo https://raw.githubusercontent.com/Kavantix/sliver_tools/master/gifs/demo2.gif |
Hmm ok |
yes, only 1, the same as header, but reversed logic, when scroll up, prev (I mean footer above) footer should shift next (footer below) |
That does complicate things somewhat since they would need to communicate with each other in order to achieve this within the current flutter sliver implementation. Thanks for the suggestion though, I'll put it on the project but I won't have time to work on this in the near future, feel free to make a PR |
@Kavantix Would be great if you could elaborate on why the whole thing would get complicated. I want to build the same thing, and I am struggling with it, but I am also new to slivers. Any tips & trick or hints are appreciated. |
@saibotma could you elaborate a bit more on the exact usecase you are trying to implement because only a subset of usecases would be as complicated as I mentioned |
I am actually trying to have a bottom (tab) bar for navigation, where scrollable content scrolls beneath it. I want to make the bottom bar opaque in order to add a blur filter and create an iOS style frosted glass effect. |
Ah I see, that usecase is indeed quite a bit simpler than what I was talking about since you only have 1 tab bar and thus don't need any logic for having multiple. However, the part you mention where it should draw on top of the other content makes it rather difficult. So making this a Sliver is probably not the best option. |
This might be another use case where SliverPinnedFooter makes sense. I want to pin the Total row at the bottom but as of now without using shrinkWrap I am not being able to do so. Is there any better way to achieve this behaviour?
|
@volser @koiralapankaj7 I just opened a draft PR #59 that should serve your needs. I would like some feedback if you have time to test it :) |
@Kavantix Thank you so much for this update. I just tested it and it is working perfectly fine. I have one suggestion:
|
Great to hear it works! |
Screen.Recording.2022-09-05.at.11.19.46.AM.movIn this video, the footer is going below the header while scrolling. What I meant was can we push the header when the footer reaches there? (header in this context is SliverPinnedHeader.) |
You can try wrapping the multisliver with the sliverwithpinnedfooter |
Well I meant try using it like this: SliverWithPinnedFooter(
sliver: MultiSliver(
pushPinnedChildren: true,
children: [...],
),
footer: FooterWidget(),
) |
video would be helpful |
Screen.Recording.2022-09-05.at.11.45.33.AM.movIf you notice at the bottom. Footer appears before the header. |
Hmmm, supporting this might require the widget to be changed to |
Hello, please where are we with this feature? I need it for a similarly described usecase in 2 of my apps; both for pinning a "Enter comment" text field to the bottom of the screen while the user scrolls. Also I can't find the |
If anyone would like to contribute that would be welcome but I do not have the need or time for this sliver at the moment. |
I realized this using boxy package. The main idea wrap your original sliver with Code structure: /// SliverContainer - is a special widget from "boxy" package
/// which allows put any foreground widget.
///
/// As foreground put footer widget, it should be constant height
/// sized and bottom aligned.
///
/// For prevent footer overflow bottom items in the list
/// add empty SizedBox after the list
SliverContainer(
// body
sliver: SliverMainAxisGroup( // multiple slivers wrapper
slivers: [
// your original sliver
SliverList(...),
// widget with same height as footer
const SliverToBoxAdapter(
child: SizedBox(height: 80),
),
],
),
// footer
foreground: Align(
alignment: Alignment.bottomCenter,
child: ListFooter(
title: '$name Footer',
height: 80,
),
),
), SliverPersistentFooter.mp4Full source code: |
Is it possible to implement SliverPinnedFooter?
The text was updated successfully, but these errors were encountered: