SliverAppBar flexibleSpace shouldn't show in scroll back up

Question

I'm using flexibleSpace in SliverAppBar with floating: true, pinned: false, snap: true: When I scroll back up. It shows AppBar and flexibleSpace space https://flutter.github.io/assets-for-api-docs/assets/material/app_bar_floating_snap.mp4. But that I want is When user scroll bottom it should hide app bar and flexibleSpace and when user scroll to up it should show only appBar. Until scroll arrive to first of page and it should show flexibleSpace also.

Solution

As far as I known there is no convenience setting in SilverAppBar for what you want.

It may not be the best solution. But it can works for some cases:

1. set floating: true, pinned: false(default is false) in SliverAppBar()

2. Control expandedHeight with scroll position

.

ScrollController _scrollController;
bool _top;
double _expandH;
double _collapseH;

@override
void initState() {
  _collapseH = 50;
  _expandH = 150;
  _top = false;
  _scrollController = ScrollController()..addListener(() {
    if(_scrollController.offset == 0 && !_top) {
      setState(() {
        _top = true;
        _scrollController.position.correctPixels(_expandH-_collapseH);
      });
    }else if(_top && _scrollController.offset > _expandH-_collapseH) {
      setState(() {
        _top = false;
        _scrollController.position.correctPixels(0);
      });
    }
  });
  super.initState();
}

...

CustomScrollView(
  controller: _scrollController,
  slivers: [
    SliverAppBar(
      floating: true,
      // pinned: false,
      expandedHeight:_top ? _expandH: _collapseH,
      ...

Comments

[pskink]

SliverAppBar has fixed, limited functionality, if you want some more complex stuff use SliverPersistentHeader instead