Comments (12)
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?
from sliver_tools.
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),
);
},
)
from sliver_tools.
Hmm adding the leading margin comes with a few decisions I'm not ready to make atm.
Like should it use the paintOrigin
to shift itself or simply extend the paintExtent
.
But @Peng-Qian why do you need the CompositedTransformTarget
can't you simply use something like:
Widget build(BuildContext context) {
final double leadingMargin = 20;
return SliverPinnedHeader(
child: Container(
margin: const EdgeInsets.only(top: leadingMargin),
child: YourChildWidget(),
),
);
}
from sliver_tools.
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~
from sliver_tools.
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.
from sliver_tools.
Still sounds like something you could do with a margin and a multisliver
Take a look at the example app I built, it does something similar I think.
If not you could share some more specific code and I’d be more than happy to help.
After reading your comment again:
Thus, add margin will break UI looking when pinned header does not reach appbar.
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?
If so then it sounds like it being pinned is not the thing you want to toggle (because that only happens at the edge anyways) but you want to artificially increase its size without it affecting your layout and thus the leadingmargin I indent to add wouldn’t help.
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?
This would work because the pinned header checks the overlap property such that it doesnt overlap with another pinned header. And a sliver being pinned is nothing more then it always having a paintExtent even though according to the layoutExtent it had already scrolled away.
from sliver_tools.
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?
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.
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?
This would work because the pinned header checks the overlap property such that it doesnt overlap with another pinned header. And a sliver being pinned is nothing more then it always having a paintExtent even though according to the layoutExtent it had already scrolled away.
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?
from sliver_tools.
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?
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.
Which part do you mean? I don’t really see a part that matches what you told me before
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?
This would work because the pinned header checks the overlap property such that it doesnt overlap with another pinned header. And a sliver being pinned is nothing more then it always having a paintExtent even though according to the layoutExtent it had already scrolled away.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?
Yes pretty much
from sliver_tools.
Which part do you mean? I don’t really see a part that matches what you told me before
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. 😂
from sliver_tools.
You should be able to use MultiSliver combined with the pinned header for that.
Perhaps you can share some code?
from sliver_tools.
@Peng-Qian have you managed to get it working?
from sliver_tools.
I’m gonna close this issue, if you want me to reopen feel free to comment and I’ll do so
from sliver_tools.
Related Issues (20)
- SliverPinnedHeader and detecting overlapping (i.e. overlapsContent) HOT 1
- Is there any way I can listen when the header sticks to the top?
- Add SliverClip.clipBehavior HOT 1
- SliverPinnedHeader add offsetTop can not work correctly HOT 3
- issues with dynamic list data HOT 2
- AbstractNode is deprecated
- Error: A constant constructor can't call a non-constant super constructor. HOT 2
- Workaround for adding Sliver into an IndexedStack HOT 1
- Flutter 3.13 Compatibility HOT 2
- `SliverList` breaks alignment in `SliverStack` HOT 2
- Flutter build fails with error after new update! HOT 4
- Question: Trying to combine a SliverPinnedHeader with an SliverAppBar that has a bottom widget HOT 4
- Missing tag on GitHub HOT 2
- [Enhancement Request] SliverAnimationSwitcher with transitionBuilder HOT 1
- sliver_tools vs normal slivers HOT 1
- Please provide the full example code from the gif HOT 3
- Multiple SliverPinnedHeader overlapping HOT 2
- How to make it fit with custom ExpansionTile Widget ? HOT 1
- Add SliverSizeTransition HOT 6
- MultiSliver fails in a shrinkwrapped, unconstrained CustomScrollView HOT 1
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 sliver_tools.