SliverAppBar flexibleSpace shouldn't show in scroll back up

user_14181556 0
Viewed 414

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.

flutter-sliver sliverappbar dart flutter
1 Answers

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,
      ...
user_142728820
Related