Stack Overflow
Stack Overflow

Questions tagged [flutter-sliverappbar]

70 questions
19
votes
2 answers

Instagram Profile Header Layout In Flutter

I've been investigating SliverAppBar, CustomScrollView, NestedScrollView, SliverPersistentHeader, and more. I cannot find a way to build something like the Instagram user profile screen's header where only the tab bar is pinned. The main body of the…
Ted Henry
  • 1,442
  • 1
  • 14
  • 34
7
votes
2 answers

How to animate the position of the items in a SliverAppBar to move them around the title when closed

I have these requirements for an Appbar and I don't find a way to solve them. When stretched, AppBar has to show the two images one above the other and the title has to be hidden. When closed, AppBar has to show the title and two images have to be…
Mou
  • 2,027
  • 1
  • 18
  • 29
6
votes
1 answer

what is the difference between SliverAppBar and SliverPersistentHeader in Flutter?

What is the main difference between SliverAppBar and SliverPersistentHeader ? What differ most in terms of their usage purpose ?
normativepcoder
  • 285
  • 3
  • 9
3
votes
1 answer

Flutter ScrollController - how to disable scroll in certain area?

Is it possible to disable scroll in certain areas of a scrollable widget? Lets say I want to disable scroll within a square area in the middle of the ListView/CustomScrollView, is that possible? I am thinking it might require me to pass true or…
sudoExclaimationExclaimation
  • 7,992
  • 10
  • 47
  • 105
3
votes
4 answers

NestedScrollView with SliverAppBar cause unexpected body padding

When I run this code, the ListView will have an unexpected top padding. (See screenshot) Why is that and is there a way to avoid this? I already tried SliverOverlapAbsorber, SafeArea and MediaQuery to fix the padding, but so far nothing seems to…
Florian Bauer
  • 401
  • 5
  • 11
3
votes
0 answers

How to make a Profile picture inside a sliverappbar that expands in flutter

I need a sort of Avatar photo widget that when I scroll down it transforms into a circle having the user name next to it and when I scroll back up, it becomes big and shows the user name under it, just like older versions of the Samsung contacts…
Emmet Vakilzadeh
  • 31
  • 3
3
votes
3 answers

Flutter remove the space TabBar and SliverAppBar

I want to implement a float AppBar with a pinned TabBar at the bottom. The following is the test code (dartPad): Widget build(BuildContext context) { return Scaffold( body: NestedScrollView( floatHeaderSlivers: true, headerSliverBuilder:…
CbL
  • 734
  • 5
  • 22
3
votes
1 answer

SliverAppBar title doesn't fade if style applied in Flutter

I want to have the title in my SliverAppBar fade in the default way however it stops working once I apply style to the text. You can see how it behave with and without TextStyle. Nothing else changes. No style Style applied Here's the code with…
Andrew
  • 31
  • 4
2
votes
0 answers

How to scroll away SliverAppBar without a body

What I'm trying to achieve: Picture 1: View should be scrollable and the NoData container should fill up the remaining space. SliverFillRemaining just scrolls under the SliverAppBar which is not wanted - it should stop at the top which seems not…
Deukalion
  • 2,516
  • 9
  • 32
  • 50
2
votes
1 answer

flutter 2 SliverPersistentHeader - avoid overlap during scroll

Here is my code : import 'package:all_in_one/cooking/pages/recipe/header/search_bar_header.dart'; import 'package:all_in_one/cooking/pages/recipe/header/welcome_header.dart'; import 'package:flutter/material.dart'; class MyRecipePage extends…
magento2-users
  • 127
  • 9
2
votes
0 answers

Flutter TabbarView not keeping scroll position even after using keys

Issue Watch the video on Imgur : Imgur You can watch the video here as well : Cloudinary As you can see in the video that the scroll position isn't being maintained. It looks like the pages are scrolling all together. Basic App Structure I am using…
Zain Ul Hassan
  • 19
  • 2
2
votes
3 answers

Flutter: How to add BackdropFilter to SliverAppBar

I want to add a BackdropFilter() to a SliverAppbar(). I want it to look something like the iOS App Library App Bar: https://cln.sh/eP8wfY. Header sliver not floating over the list in a NestedScrollView does so but only to the header, I want the…
user15782390
2
votes
0 answers

How to custom search bar on SliverAppBar flutter

I am new with flutter. I would like to custom a search widget on SliverAppBar. On scroll up, I would like it show this search widget with a flexible to nearly cart button as show in pictures. Code final expandedHeight = 150.0; @override …
Wzo
  • 111
  • 7
2
votes
4 answers

Why is SliverFillRemaining expanding too much?

I'm trying to make a SliverAppBar that reacts to its height, showing different things depending if it's expanded or not. I've based it on https://medium.com/flutter-community/flutter-sliverappbar-snap-those-headers-544e097248c0, but I'm having an…
proformance
  • 440
  • 6
  • 8
1
vote
1 answer

How to achieve Cupertino Style Navigation Bar with a cupertino search field inside it

I am developing an iOS application in flutter. I want a navigation bar which can be expandable. On expand there should be large title on left side and on collapse same title should be on top center. This thing is possible with…
Umar Ghaffar
  • 23
  • 5
1
2 3 4 5