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
2
votes
0 answers
Flutter - SliverAppBar with snapping toolbar and nested scroll view
I'm trying to reproduce a UX design in which we have the following components:
A top bar which contains the text "Desmos"
A main post content, which is composed of
A header (user icon, user name, post date, options button)
The post message
Any…
Riccardo Montagnin
- 91
- 8
2
votes
0 answers
Can I assign an onClick() function to my various SliverPersistentHeader to jump to that position in the CustomScrollView?
I have successfully built my CustomScrollView() that contains SliverGrid() items and SliverPersistentHeaders() which are pinned. I want a click on any SliverPersistentHeader() to scroll to the exact position. I want to know if this is possible in…
lordvidex
- 3,581
- 3
- 17
- 25
2
votes
1 answer
Icons inside flexibleSpace not hiding when SliverAppBar scrolled
I am having 'Next' and 'Prev' buttons inside flexibleSpace, as you can see below, Text of 'Next' and 'Prev' button does hide on scroll but forward and backward arrows do not hide. I want them to hide when scrolled.
This is my code,
…
Ravinder Kumar
- 7,407
- 3
- 28
- 54
1
vote
1 answer
Flutter appbar with image, customized containers and tabbar
The screen and when scrolled. I have used dependency appbar_animated: ^0.0.3 for this effect, so when user scrolls then the image and my custom container which has info about the restaurant disappears and it becomes a normal app bar. Now the problem…
Ahmed Zaman
- 11
- 6
1
vote
1 answer
SliverAppbar has a bluish tint
I have used a SliverAppBar in a widget for which the code is as follows;
import 'package:flutter/material.dart';
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return…
Anuj Kaithwas
- 803
- 1
- 10
- 30
1
vote
2 answers
Inconsistent behavior of SABT widget when changing scroll direction in Flutter
If I scroll down, the collapsed app bar becomes visible and the first child is also visible. That's good. However, if I suddenly change the scrolling direction to up, even though the app bar is still collapsed, the second child is displayed. Why…
gaith
- 11
- 3
1
vote
0 answers
how change appbar background color with sliverappbar - Flutter
How can I change the color in the video to white?
SliverAppBar(
backgroundColor: Colors.white,
pinned: true,
stretch: true,
leading: IconButton(onPressed: () { }, icon: const…
Kawan MC
- 33
- 4
1
vote
1 answer
Can we apply rounded borders to SliverAppBar in Flutter?
[I want to implement this UI with rounded appbar to my shop app] (https://i.stack.imgur.com/YoIIR.jpg)
When I use ClipRRect to apply rounded borders to SliverAppBars I get this error. However, I can apply ClipRRect to normal appBar. I need a…
Mohammad Amini
- 11
- 1
1
vote
0 answers
build Custom SliverAppbar in flutter
I'm trying to create SliverAppBar() like this :
And the result of my trying looks like this :
Here is my code :
Scaffold(
backgroundColor: AppColor.backgroundColor,
body: CustomScrollView(
slivers: [
SliverAppBar(
…
arash shakibaee
- 47
- 6
1
vote
0 answers
How to create custom title animation for SliverAppBar in Flutter
I'm trying to create a clone project with this design:
original design
But the result is not that good, IconButton is not at the right position, and a lot of animtation is not implemented yet:
The search bar
Icon Button Color changes
Icon Button…
Son Hoang
- 36
- 2
1
vote
2 answers
How can I customize SliverAppBar Flutter?
Hi Guys I locking for create app bar Like this with SliverAppBar() widget Like this :
And I Tried to make it With SliverAppBar() But The output is like this :
Here is Code :
Scaffold(
drawer: const Drawer(),
body:…
arash shakibaee
- 47
- 6
1
vote
1 answer
How to make floating SliverAppBar to show only collapsed bar?
I am using a SliverAppBar for Flutter web with a background image, and I would like the bar to disappear when the user is scrolling down the web and appear again as soon as they scroll up, but only the app bar, without showing the background unless…
JAgüero
- 403
- 1
- 4
- 14
1
vote
1 answer
Safe Area + AppBar/NestedScrollView creates an unwanted bar in Flutter
When I work with NestedScrollView/SliverAppbar + want to keep the body in the Safe Area, it automatically creates an empty horizontal bar between the AppBar and the body (I made the color of this bar orange to visually help the issue). Is there a…
sebdoy
- 111
- 2
- 14
1
vote
1 answer
Add a buttons carousler to a SliverAppBar - flutter
My goal, if possible, is to add a carousel of buttons and a search bar to a SliverAppBar, that way the search bar is persistent and the carousel just shrinks when scrolling down.
This is the current state without the SliverAppBar:
import…
RobHG
- 115
- 6
1
vote
0 answers
Flutter - How to get height of multi-line Text widget?
Is there a canonical way of computing the height of a multi-line Text widget before rendering? Basically, I want to show dynamic text in a SliverAppBar. Unfortunately a height needs to be defined on the flexibleSpace using expandedHeight. This is my…
user2892437
- 1,111
- 1
- 14
- 22