SliverAppBar flexibleSpace shouldn't show in scroll back up


I’m using flexibleSpace in SliverAppBar with floating: true, pinned: false, snap: true: When I scroll back up. It shows AppBar and flexibleSpace space 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.


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;

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


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

Answered By – yellowgray

Answer Checked By – Robin (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *