引っ張ると伸びるヘッダー Stretchy Header

一番上までスクロールした状態でさらに下へ引っ張ると、上の画像が伸びて拡大し、離すと戻る。

別名: 伸びるヘッダーストレッチヘッダー引っ張ると画像が拡大パララックスヘッダーStretchy HeaderPull to Zoom Header
動き: 一番上でさらに引く画像が伸びて拡大離すと戻る
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

別タブで大きく開く ↗

どんなもの？

プロフィールやお店の詳細画面で、上の写真を「引っ張って大きく見る」遊び心のある動きです。

SliverAppBar に stretch: true を付け、FlexibleSpaceBar の stretchModes で伸び方を選びます

（zoomBackground: 拡大、blurBackground: ぼかし、fadeTitle: 題名が消える）。

一番上を越えて引っ張れる必要があるので、スクロールを BouncingScrollPhysics にします。

onStretchTrigger を使うと、一定以上引いたときに更新などの処理を走らせることもできます。

こんなときに

写真が主役の詳細画面・プロフィール画面

避けたい場面

一番上から引っ張る操作を「引っ張って更新」に使っている画面

最小コード

CustomScrollView(
  physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
  slivers: [
    SliverAppBar(
      pinned: true,
      stretch: true,
      expandedHeight: 240,
      flexibleSpace: FlexibleSpaceBar(
        title: const Text('沖縄の海'),
        stretchModes: const [StretchMode.zoomBackground, StretchMode.blurBackground],
        background: Image.asset('sea.jpg', fit: BoxFit.cover),
      ),
    ),
    SliverList.builder(...),
  ],
)