スクロールで縮む見出し Collapsing App Bar
最初は大きな画像と見出しが出ていて、上にスクロールすると縮んで普通の細い見出しになって上に残る。
本物の Flutter ウィジェットが動きます（初回は数秒かかります）
どんなもの？
お店や場所の詳細画面、プロフィール画面でよく使われます。iOS の「ラージタイトル」も同じ仲間です。
CustomScrollView の先頭に SliverAppBar を置き、expandedHeight で広がったときの高さを指定します。
pinned: true で縮んだ後も上に残り、FlexibleSpaceBar の background に画像を置くと縮むにつれて消えていきます。
Material 3 には SliverAppBar.medium / SliverAppBar.large という、文字だけの大見出し版もあります。
こんなときに
- 詳細画面の最初に写真や名前を大きく見せ、読み進めるときは画面を広く使いたい
避けたい場面
- 一覧の画面など、最初から内容を多く見せたい画面（大きな見出しが邪魔になる）
最小コード
CustomScrollView(
slivers: [
SliverAppBar(
pinned: true, // 縮んだ後も上に残す
expandedHeight: 220, // 広がったときの高さ
flexibleSpace: FlexibleSpaceBar(
title: const Text('京都の旅'),
background: Image.asset('kyoto.jpg', fit: BoxFit.cover),
),
),
SliverList.builder(
itemCount: 20,
itemBuilder: (context, i) => ListTile(title: Text('見どころ $i')),
),
],
)使うウィジェット
CustomScrollViewSliverAppBarFlexibleSpaceBar