Collapsing AppBar in Flutter – Android and iOS

Here I will show two different ways to create collapsing AppBar in flutter.
 

 
Watch Video Tutorial
 

 
Using NestedScrollView
 

 nested() {
    return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                "Collapsing AppBar",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.0,
                ),
              ),
              background: Image.asset(
                "images/parrot.jpg",
                fit: BoxFit.cover,
              ),
            ),
          )
        ];
      },
      body: Center(
        child: Text("The Parrot"),
      ),
    );
  }

 
I have the sample image parrot.jpg in the images folder and added to pubspec.yaml.
SliverAppBar expands to its expandedHeight when user scrolls the view below the AppBar.
 
Using CustomScrollView
 

custom() {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          expandedHeight: 200.0,
          floating: false,
          pinned: true,
          flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            title: Text(
              "Collapsing AppBar",
              style: TextStyle(
                color: Colors.white,
                fontSize: 16.0,
              ),
            ),
            background: Image.network(
              "https://images.pexels.com/photos/1020315/pexels-photo-1020315.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
              fit: BoxFit.cover,
            ),
          ),
        ),
         SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) => ListTile(
                  title: Text("List Item $index"),
                ),
          ),
        ),
      ],
    );
  }

 
Here we are using ‘CustomScrollView‘ instead of NestedScrollView to create the Scrolling effect.
 
Source Code
 
Get the complete source code from here.

Please leave your valuable comments below.
Thanks.