How to add collapsing toolbar in Flutter

Hello. There was this thing in Android called collapsing toolbar. In flutter it is called Sliver AppBar.   You probably want to have something like this in your app:

SliverAppBar(
    expandedHeight: 250.0,
    pinned: true,
    flexibleSpace: new FlexibleSpaceBar(
        background: Image.network('https://placeimg.com/500/370/any'),
    ),
),

The length is set to be close to Android native collapsing toolbar, it is pinned to represent a regular AppBar when scrolled up and we have an image inside of it when it is scrolled down and widened to maximum.
Notice how much easier is to set an image from internet than in native Android.

We usually want to have our SliverAppBar in CustomScrollView widget and if we have a list of items in our application body, we can’t use ListView in CustomScrollView.
That is why we need to use SliverList. There’s almost no difference.

ListView is a SliverList. Same with GridView, which is a SliverGrid.

They are doing exactly the same thing. The only difference between them is that SliverList is a sliver, not a widget. Which means it’s used inside a ScrollView, usually CustomScrollView.

ListView is nothing else but a biding of SliverList to transform it into a Widget to make it usable alongside other widgets such as Row for example

Here is the simple usage of SliverAppBar which is easy to adjust for your needs:

import 'package:flutter/material.dart';
import 'login.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widgetbuild(BuildContext context) {
        // TODO: implement build
        returnMaterialApp(
        home: MyHomePage(),
    );
    }
}

class MyHomePage extends StatefulWidget {
    @override
    State<StatefulWidget>createState() {
    // TODO: implement createState
    return_MyHomePageState();
    }
}

class _MyHomePageState extends State<MyHomePage> {
    @override
    Widgetbuild(BuildContext context) {
    // TODO: implement build
    returnScaffold(
        body: CustomScrollView(
        slivers: <Widget>[
            SliverAppBar(
                 expandedHeight: 250.0,
                 pinned: true,
                 flexibleSpace: new FlexibleSpaceBar(
                       background: Image.network('https://placeimg.com/500/370/any'),
                 ),
            ),
           newSliverList(
               delegate:
                  newSliverChildBuilderDelegate((context, index) =>newCard(
                      child: new Container(
                      padding: EdgeInsets.all(10.0),
                      child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                            CircleAvatar(
                                 backgroundColor: Colors.brown,
                                 backgroundImage: new NetworkImage(
                                     "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR17d21Bvtz-Ua1w5v8MLQEop69a5XTZcr-jk0ukfTbupRw-g1P"),
                                 ),
                                 SizedBox(
                                    width: 10.0,
                                 ),
                                 Text("Description of the list item")
                                 ],
                               ),
                             ),
                         )),
                      )
                  ],
              ),
         );
   }
}