-
Notifications
You must be signed in to change notification settings - Fork 26.8k
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
SliverAppBar flexibleSpace with height depending on children #18345
Comments
Have you managed to achieve this somehow, @adriancmurray? |
@noordawod I did a complete redesign of my app since I wanted to implement this feature so I ended up not needing it. |
Alright, cool, thanks. |
I would like if there was an option to set a fixed height for the AppBar. |
Did you try to get an answer on StackOverflow? |
Yes, but when I'm using a SliverAppBar, I can not set the height of it to a fixed size, or to use SliverAppBar's children's (title) size. And the PreferredSize used inside a Sliver does not force the child (SliverAppBar) to stick to the height I want. (Wont work |
@vinicioslc @noordawod did you guys figure out a way to do this? I have a text widget that could be very long. I am setting it as the background so I need the |
No, unfortunately. |
@javierforero @noordawod im using this package for now https://pub.dev/packages/flutter_sticky_header and its highly customizable |
@javierforero see my comment |
@vinicioslc https://pub.dev/packages/flutter_sticky_header |
@singlakaran Learn about dependency overrides: https://dart.dev/tools/pub/pubspec#dependencies |
I've been able to get something that works for me by using SliverAppBar with a combination FlexibleSpaceBar with title padding and a bottom widget to set the overall height.
But obviously this is using known heights. |
Really need this one, any updates? |
Need this feature +1 |
we are still waiting for this 😞 |
It is May 2022 and this is still an issue. The best solution I found is to calculate the exact height of the flexibleSpace by adding up all the widgets it contains (widget height, padding, SizedBox, ...). For example to calculate the height of a The problem is that every time you add a new widget in the flexibleSpace, you have to update the sum result. |
up |
Current class CustomSliverPersistentHeader extends SingleChildRenderObjectWidget {
const CustomSliverPersistentHeader({super.key, required super.child});
@override
RenderObject createRenderObject(BuildContext context) => _RenderCustomSliverPersistentHeader();
}
class _RenderCustomSliverPersistentHeader extends RenderSliverPinnedPersistentHeader {
@override
double get maxExtent => child!.getMaxIntrinsicHeight(constraints.crossAxisExtent);
@override
double get minExtent => 0;
} And a dartpad with a working example. Notice, that This approach can be used to implement basically any layout requirements (which shows the amazing flexibility of Flutter layout architecture!). Unfortunately, implementing your own The requirements here can be drastically different, so i think that creating a |
It has been 4 years that we are looking for this kind of feature . |
up |
Any updates? |
up |
1 similar comment
up |
Up |
Almost 5 years and still waiting |
Up |
up? |
up |
Hi guys! I was struggling with the same issue and discovered this adapter (SliverToBoxApdater) that allows you to convert any widget into a sliver, so you can use this instead of SliverAppBar and achieve the dynamic height. |
+1 |
I used the |
This comment was marked as abuse.
This comment was marked as abuse.
late answer, but I also had the same requirement for a dynamic height sliver app bar. I finally found a workaround which was working for nearly every situation I needed by faking a sliverappbar, calculating its size and then displaying a real sliverapp bar (so I get access to its cool animations). Enjoy:
|
this worked very well! |
Thx @SynSzakala This was really helpful. <3 I did some small adjustments for it to not break when over-scrolling on iOS, and Written this: import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
enum SliverToBoxPersistentHeaderBehaviour {
pinned,
floating,
}
class SliverToBoxPersistentHeader extends SingleChildRenderObjectWidget {
final SliverToBoxPersistentHeaderBehaviour scrollBehaviour;
const SliverToBoxPersistentHeader({
super.key,
required super.child,
this.scrollBehaviour = SliverToBoxPersistentHeaderBehaviour.floating,
});
@override
RenderObject createRenderObject(BuildContext context) {
switch (scrollBehaviour) {
case SliverToBoxPersistentHeaderBehaviour.pinned:
return _RenderSliverPinnedPersistentHeader();
case SliverToBoxPersistentHeaderBehaviour.floating:
return _RenderSliverFloatingPersistentHeader(
showOnScreenConfiguration:
const PersistentHeaderShowOnScreenConfiguration(),
);
}
}
}
class _RenderSliverPinnedPersistentHeader
extends RenderSliverPinnedPersistentHeader {
@override
double get maxExtent =>
child!.getMaxIntrinsicHeight(constraints.crossAxisExtent);
@override
double get minExtent => maxExtent;
}
class _RenderSliverFloatingPersistentHeader
extends RenderSliverFloatingPersistentHeader {
_RenderSliverFloatingPersistentHeader({
required super.showOnScreenConfiguration,
});
@override
double get maxExtent =>
child!.getMaxIntrinsicHeight(constraints.crossAxisExtent);
@override
double get minExtent => maxExtent;
} There is also the |
You saved my life. |
I've created a package that can help with this very well: https://pub.dev/packages/intrinsic_size_builder Greatly simplifies:
Checkout the examples, they specifically target the issue OP describes. |
I have a SliverAppBar with a flexibleSpace that holds information that will change in height. I simply want my AppBar to determine it's height at runtime rather than the static expandedHeight option. Do I really need to calculate the height of this widget before I pass it to the flexibleSpace? Or is there a built in method to allow the SliverAppBar to determine that on it's own?
The text was updated successfully, but these errors were encountered: