How to Make Custom AppBar in Flutter Like in Hamilton flutter app?

Question

LIke This

My approach : an Scaffold without the AppBar and body : Stack > [image,listview]

Answer 1

Flutter comes with a bunch of so-called “sliver” widgets that can be used to achieve different effects based on the user's scroll actions. By default, it's fairly easy to achieve a similar effect from the Material Design guidelines ¹, where the title starts off rather large at the bottom of the hero image and then animates up to the top when the user scrolls down on the page.

To achieve this effect, you can use a CustomScrollView with a SliverAppBar at the top and some other sliver components under it, like this:

new CustomScrollView(
  slivers: <Widget>[
    new SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: new FlexibleSpaceBar(
        title: new Text(_shortTitle),
        background: new Image.network(_imageUrl),
      ),
    ),
    new SliverPadding(
      padding: new EdgeInsets.all(16.0),
      sliver: new SliverList(
        delegate: new SliverChildListDelegate([
          new Text(_longTitle),
          new Text(_body),
          new Text(_author),
          new Text(_body),
        ]),
      ),
    ),
  ],
);

¹ Scroll down to “Flexible space with image” in the Material Design guidelines