In Flutter, the SliverAppBar widget is a specialized app bar that can be used within a CustomScrollView to create scrollable headers and navigation bars. It's specifically designed to work with slivers, which are portions of scrollable areas in Flutter.
Questions tagged [sliverappbar]
119 questions
1
vote
1 answer
Rounded borders on SliverAppBar in flutter
How do you make rounded bottom-corners on a SliverAppBar?
I know of 2 ways, but they just don't quite cut it.
1: To use "shape: ContinuousRectangleBorder". The reason this doesn't cut it, is because it's not Circular, but this weird square-circle…
Tobias H.
- 426
- 1
- 6
- 18
1
vote
1 answer
Flutter: Flutter: How to make finest this Slivers efect
first sorry for my bad English, I will try to explain myself as best as possible
I made an item from a list with an effect like this:
When I scroll to fill the lower fields, the image size will be reduced to a minimum height, the flat button font…
Pillo
- 347
- 1
- 4
- 15
1
vote
1 answer
Flutter SliverAppBar and SliverList have different scrolls
[Initial Postion][1]
[Scrolling from SliverList side][2]
[Scrolling from SliverAppBar side][3]
class ProductScreen extends StatelessWidget {
static const routeName = "/product-screen";
@override
Widget build(BuildContext context) {
…
Himanshu Rajput
- 100
- 2
- 10
1
vote
2 answers
How can I make a SliverAppBar that is similar to Google News?
I want a standard AppBar when the app starts, however, once the user begins scrolling I want the app bar to slide up and off the screen. However, when that happens, the status bar (on iOS) doesn't have a background. I don't want to set a constant…
Moshe G
- 516
- 1
- 4
- 13
0
votes
1 answer
centering FlexibleSpaceBar in SliverAppBar
How to centering the flexible space bar in sliverappbar
do i just need use title? but how to set the size of the title where you can't, wasn't?
Here the snippet code
class _ArticleAppBarState extends State with…
KueCubit
- 5
- 1
0
votes
1 answer
Flutter: How to Material 3 theme FlexibleSpaceBar so it fades to the scrolled down AppBar color?
I have a hero image, consisting of a SliverAppBar with a child of FlexibleSpaceBar containing the hero image.
When the user scrolls down the page the hero image scrolls up fading to white. White is the initial colour of the appbar.
But, as per…
Sam
- 1,659
- 4
- 23
- 42
0
votes
0 answers
Flutter SliverAppBar with custom scrolling
I have a SliverAppBar with an image background, and on top of that some rainbow persistent header as an image. I would like to achieve a situation when I scroll the list of items the image fades away as it is now and for the name and description…
Joe
- 500
- 1
- 4
- 11
0
votes
0 answers
Extremely thin line between `SliverAppBar` and `SliverPersistentHeader` in flutter
So I am using a CustomScrollView and inside I have SliverAppBar and SliverPersistentHeader as the first two children, with no styling except blue background color.
But there is a really faint, translucent (because when I scroll I can see that there…
intweek
- 7
- 6
0
votes
0 answers
Using NotificationListener and NestedScrollView is giving unexpected scroll behaviour in Flutter
I'm using CustomSliverDelegate and CustomNestedScrollView. When i scroll up from the bottom of the screen, the scroll behaviour is working perfectly fine.After scrolling up, i tried to scroll down from the middle of the screen or just above from the…
Bhuvana Chandra
- 7
- 3
0
votes
0 answers
Animation for SliverAppBar
I want to animate a slide transition for my SliverAppBar inside an ExtendedNestedScrollView. I want the appbar to collapse whenever user is not on first tab
I was following this example of SliverAnimatedSwitcher to use slide transition instead of…
Kiên Đậu Gia
- 1
- 1
0
votes
0 answers
Flutter StickyHeader (SliverPinnedHeader) goes under SliverAppBar on scroll
When I use StickyHeader or SliverPinnedHeader combined with SliverAppBar, header goes under SliverAppBar. A video is clean an explanatory which shows the "Goalkeeper" is a Text under a StickyHeader. It actually sticks but it sticks just below the…
Ataberk
- 557
- 1
- 6
- 26
0
votes
0 answers
body goes inside SliverAppBar after using SliverOverlapAbsorber too
flutter NestedScrollView:
body goes inside SliverAppBar of headerSliverBuilder after using SliverOverlapAbsorber too.
sample row 0 should not go inside tabs.
void main() {
runApp(
MaterialApp(
home: const HomePage(),
),
);
}
class…
Ujwal Basnet
- 1
- 1
0
votes
0 answers
CustomScrollView slivers with snap and enter-always behavior
In my Flutter app, I have a CustomScrollView with various slivers. I need to insert two widgets at the top of the list that would behave in a manner similar to views in Android's native AppBarLayout with scroll|snap|enterAlways and noScroll flags…
SqueezyMo
- 1,606
- 2
- 21
- 34
0
votes
0 answers
How to fix Flutter's FlexibleSpaceBar widget so it fades into the appbar with Material3
So 'upgrading' to material3 appears to break FlexibleSpaceBar, as you scroll down I had it so it faded into the appbar colour.
Upgrading to Material3, as you scroll the appbar changes from the colour white, to a shade of based of…
Sam
- 1,659
- 4
- 23
- 42
0
votes
0 answers
The appBar doesn't expand or collapse automatically | Flutter
What I want to achieve is when I scroll, the appBar should expand or collapse automatically, so that there is no middle state, only collapsed or expanded completely. This feature can be seen in contact or setting app, so I want to reproduce it.
Here…
AinahToky Andry
- 11
- 3