flutter - How to achieve custom appbar layout scrollable effect in flutter

Question

I tried to use Flutter SliverAppBar within CustomScrollView but that doesn't work as I want.

Answer 1

To use a SliverAppBar and have an app bar that shrinks and sticks to the top you can follow this example:

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 200.0,
        floating: true,
        snap: true,
        pinned: true,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('SliverAppBar 1'),
          centerTitle: true,
          background: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text('text 1'),
              Text('text 2'),
              Text('text 3'),
            ],
          ),
        ),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.greenAccent,
              child: Text('SliverList item'),
              height: 60,
              margin: EdgeInsets.all(4),
            );
          },
          childCount: 20
        ),
      ),
    ],
  )
);