FlexibleSpace in SliverAppBar is not hiding it's contents when I scroll up

Question

The problem:

Why did contents inside flexibleSpace is not hiding when I'm scrolling up?

This is my code:

class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      physics: PageScrollPhysics(),
      slivers: [
        SliverAppBar(
          title: Text('Dashboard'),
          actions: [
            CircleAvatar(
              backgroundColor: Colors.transparent,
              backgroundImage: NetworkImage('https://i.pinimg.com/originals/da/51/c2/da51c26fe3398b0f8314fee17a98e0e7.jpg'),
            ),
            SizedBox(width: 10.0),
          ],
          floating: false,
          pinned: true,
          expandedHeight: 300.0,
          flexibleSpace: Stack(
            children: <Widget>[
              Positioned.fill(
                child: Image.network(
                  "https://images.wallpapersden.com/image/download/colorful-neon-bubbles_a2dtaWmUmZqaraWkpJRmbmdlrWZlbWU.jpg",
                  fit: BoxFit.cover,
                )
              ),
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text('Join as our member now,\nget discount upto 70%', style: TextStyle(color: Colors.white),),
                    SizedBox(height: 8.0),
                    RaisedButton(
                      child: Text('Subscribe now', style: TextStyle(color: Colors.red),),
                      onPressed: () {},
                    )
                  ],
                ),
              )
            ],
          ),
        ),
        SliverList(
        delegate: SliverChildListDelegate([
          Container(
            height: 500.0,
              ),
            ]),
          )
        ],
      ),
    );
  }
}

EDIT: I tried this, but it didn't work.

bottom: PreferredSize(
  preferredSize: Size.fromHeight(0),
  child: ... 

Answer 1

Add a FlexibleSpaceBar, then your Stack as its background, like this:

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        physics: PageScrollPhysics(),
        slivers: [
          SliverAppBar(
              title: Text('Dashboard'),
              actions: [
                CircleAvatar(
                  backgroundColor: Colors.transparent,
                  backgroundImage: NetworkImage(
                      'https://i.pinimg.com/originals/da/51/c2/da51c26fe3398b0f8314fee17a98e0e7.jpg'),
                ),
                SizedBox(width: 10.0),
              ],
              floating: false,
              pinned: true,
              expandedHeight: 300.0,
              flexibleSpace: FlexibleSpaceBar(
                background: Stack(
                  children: <Widget>[
                    Positioned.fill(
                        child: Image.network(
                      "https://images.wallpapersden.com/image/download/colorful-neon-bubbles_a2dtaWmUmZqaraWkpJRmbmdlrWZlbWU.jpg",
                      fit: BoxFit.cover,
                    )),
                    Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            'Join as our member now,\nget discount upto 70%',
                            style: TextStyle(color: Colors.white),
                          ),
                          SizedBox(height: 8.0),
                          RaisedButton(
                            child: Text(
                              'Subscribe now',
                              style: TextStyle(color: Colors.red),
                            ),
                            onPressed: () {},
                          )
                        ],
                      ),
                    )
                  ],
                ),
              )),
          SliverList(
            delegate: SliverChildListDelegate([
              Container(
                height: 500.0,
              ),
            ]),
          )
        ],
      ),
    );
  }
}