即使在添加扩展小部件后，SliverAppBar 也无法正常工作

Question

What's the correct way to make a collapsible header in flutter?

I tried the following but it didn't work. What am I doing wrong and how can I fix it?

return CustomScrollView(
  shrinkWrap: true,
  slivers: [
    SliverAppBar(
      expandedHeight: 200,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text(title),
        background: Image(image: AssetImage(imgPath), fit: BoxFit.cover),
      ),
    ),
    SliverFillRemaining(
      child: Column(
        children: [Text('some cool text here')],
      ),
    )
  ],
);

Answer 1

Yes, it's a correct way and it works healthy. If you are asking why its not completely collapsing, you should check "pinned" value. If you set it "false" it will completely collapse.

  SliverAppBar(
   expandedHeight: 200,
   pinned: false,
   flexibleSpace: FlexibleSpaceBar(
    title: Text(title),
    background: Image(image: AssetImage(imgPath), fit: BoxFit.cover),
   ),
  ),

You can check this documentation for further information about SliverAppBar.