ドラッグできるシート Draggable Scrollable Sheet
画面下に出しっぱなしの板を上下に引っ張って高さを変えられる。地図アプリの「近くのお店」一覧のあれ。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
Google マップや Apple マップで、地図の上に重なっている一覧の板です。
DraggableScrollableSheet は、シートの高さの変更と中身のスクロールを1本の指の動きで切り替えてくれます。
builder で渡される ScrollController を中の ListView に必ず渡すこと(渡さないと引っ張れません)。
snap と snapSizes を指定すると、指を離したとき決まった高さに吸い付きます。
こんなときに
- 背景(地図・写真・動画)を見せつつ、関連する一覧も見せたい
- 「ちょっと見る」と「しっかり見る」を行き来させたい
避けたい場面
- 背景に操作するものがない画面(ただのボトムシートや普通の画面で十分)
最小コード
DraggableScrollableSheet(
initialChildSize: 0.25,
minChildSize: 0.12,
maxChildSize: 0.9,
snap: true,
snapSizes: const [0.25, 0.5],
builder: (context, controller) => Material(
elevation: 8,
borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
child: ListView.builder(
controller: controller, // ← これを渡さないと引っ張れない
itemCount: 30,
itemBuilder: (context, i) => ListTile(title: Text('項目 $i')),
),
),
)使うウィジェット
DraggableScrollableSheet