flutterdartflutter-layoutflutter-sliversliverappbar

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


The problem:

enter image description here enter image description here

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: ... 

enter image description here enter image description here


Solution

  • 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,
                  ),
                ]),
              )
            ],
          ),
        );
      }
    }